분류 전체보기 (64) 썸네일형 리스트형 [html, css 기초] 4. html 속성과 css 1. 이론 이전 강의에서 html을 기본적으로 다루는 방법을 배웠다. 이제 html 속성에 css 코드를 추가하여 색상, 위치, 굵기, 스타일 등을 변경할 수 있다. 실습을 보면 css가 뭔지 직관적으로 알 수 있다. 2. 실습 [css 적용 전 기본값] [css 코드 작성] : 제목을 가운데로 옮기는 코드이다. # css 코드란? style="~" 부분을 의미 ( html 속성 ) # open tag에만 작성할 수 있음을 주의한다. [css 코드 적용 후] 퀴즈) 색상을 옮기는 css 코드를 작성해본다. # mdn web docs에서 css reference를 보고 색상을 바꿀 수 있는 것을 찾아 글 색상을 변경한다. 정답은 다음 글에서 확인할 수 있습니다. [html, css 기초] 3. html 요소 1. 이론 html element ( 요소 )란? ● h는 제목 짓고 싶을 때 사용한다. ● Hello World 전체를 html element라고 한다. ● 는 open tag, 는 closing tag라고 부르며 브라우저가 태그의 시작과 끝 지점을 알 수 있도록 closing tag 에는 "/"가 포함 되어 있다. ● h1을 element name이라고 부른다. ● "Hello World" 부분을 element content라고 부른다. ● h는 html element의 일부 일 뿐 이미지, 부제목, 내용 등을 모두 포괄한다. ● 엄밀하게는 태그 없어도 눈에 보일 수 있지만 주석을 달고 더 많은 의미를 브라우저에게 제공한다. ● 는 단락을 만들고 싶을 때 주로 사용 [예시] [결과] [html, css 기초] 2. 개발 환경 구축하기 1. 이론 앞선 강의에서 텍스트파일을 통해 코드를 구현 해 보았다. 하지만 프로젝트를 진행할 경우 텍스트 파일만을 이용하여 코드를 구현하는 것은 매우 불편하고 시간이 많이 소요 되기 때문에 우리는 무료로 배포되어 있는 vscode ( visual studio code )라는 편집기를 통해 보다 쉽게 코드를 구현할 수 있다. 2. 실습 # vscode 설치 과정은 생략 ( 구글 - vscode 설치방법 검색 ) # 바로 vscode를 실행한 뒤 Start - Open Folder를 클릭하여 이전 강의에 생성한 index.html을 open한다. # File - open Folder를 클릭하면 왼쪽 창으로 폴더를 관리할 수 있다. # 테마는 설정( 톱니바퀴 ) 모양을 클릭한 뒤 Themes -> Color .. [html, css 기초] 1. html 페이지 만드는 방법 1. 이론 웹사이트는 우리가 지시한 명령( code )과 명령을 읽어서 수행하는 역할을 하는 브라우저( Browser )로 구성되어 있다. 이때 우리가 명령을 어떻게 지시할까? 이게 바로 html이다! html에 코드를 작성하여 브라우저로 로드하게 되면 브라우저가 html을 읽고 실행한다. 2. 실습 # 바탕화면에 새로운 폴더를 만든다. (폴더명은 자유롭게) # 텍스트 파일을 하나 생성한다. # 이름을 아무거나 짓고 뒤에 .html을 붙여 파일명을 변경한다. # 유형에 해당하는 항목이 다음과 같이 바뀌었는지 확인한다. ( 안바뀌었다면 아래 참고 ) # 안바뀐 경우 보기 -> 표시 -> 파일 확장명 체크 # 해당 파일을 메모장으로 열어준다. # 다음과 같은 코드를 작성한 뒤 ctrl + s 로 저장한 뒤 .. 6. Mortal Insult 보호되어 있는 글입니다. [1994 Darwin Awards] 2. Auto Blotto 보호되어 있는 글입니다. [1994 Darwin Awards] 1. Sizzling Scaffolding 보호되어 있는 글입니다. [1994 Darwin Awards] 30. Gunpowder-Guy Fawkes 보호되어 있는 글입니다. 이전 1 2 3 4 5 6 7 8 다음
