- HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
- 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
ㄴ input type을 설정하여 다양한 종류의 input을 활용할 수 있다.- 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
ㄴ 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
ㄴ id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
ㄴ HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
attribute name(속성의 이름)
과 attribute value(속성의 값)
으로 구성됩니다.class
속성의 이름, editor-note
속성의 값 <script>
엘리먼트가 자바스크립트 실행을 위해 사용됩니다. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
<!DOCTYPE html>
doctype. 필수 서문입니다. <html></html>
전체 페이지의 모든 콘텐츠를 래핑하며 때로는 루트 요소라고도합니다.<head></head>
페이지 뷰어에게 표시하는 콘텐츠 가 아닌 HTML 페이지에 포함하려는 모든 항목에 대한 컨테이너 역할, 여기에는 검색 결과에 표시하려는 키워드 및 페이지 설명, 콘텐츠 스타일을 지정하는 CSS, 문자 집합 선언 등이 포함<meta charset="utf-8">
문서에서 사용해야하는 문자 집합을 UTF-8로 설정<title></title>
페이지 제목을 설정<body></body>
텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등 모든 콘텐츠 포함 <h1>
제목, 최대 3~4 개만 사용<p>
paragraph(문단)의 약자로, 하나의 문단을 표현/ 단락<a>
anchor(닻)의 약자로, 다른 웹페이지로 연결되는 하이퍼링크를 HTML 문서에 표시, 주로 href 속성과 사용<section>
웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분<ul>
unordered list(목록)의 약자로, 순서가 없는 데이터를 표현<ol>
순서가 있는 목록<li>
내에 들어감<div>
는 태그는 한 줄 차지<span>
는 컨텐츠 크기만큼 공간 차지<img src= " ">
<a href = " " > 네이버 </a>
input
을 사용해서 입력 폼을 만들 수 있음textarea
는 텍스트 박스가 생기고 줄바꿈이 되는 입력폼
- CSS는 스타일 시트 언어, HTML 요소의 스타일을 선택적으로 지정
- CSS 규칙
- Selctor : 스타일링 할 요소, 태그이름이나 id, 또는 클래스를 선택
- 선언 : 스타일을 지정할 요소의 속성 지정
- 속성 : 요소의 스타일 지정
- 속성 값 : 값을 작성한 다음 세미콜론을 적는 습관 들이자!
free app icon
)<h4>
요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id
를 붙여서 해결#
기호를 이용<h4 id="navigation-title">This is the navigation section.</h4>
#navigation-title {
color: red;
}
class
사용#
이 아닌 .
을 이용해 선택<!-- 바른 예제 -->
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>
.menu-item {
text-decoration: underline;
}
<li>
요소에 적용된 여러 class 중에서 selected class를 통해 적용<li class="menu-item selected">Home</li>
.selected {
font-weight: bold;
color: #009999;
}
color
색상.box {
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
}
font-family
글꼴, 글꼴의 이름은 따옴표를 붙여서 적용.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
font-size
크기.title {
font-size: 24px;
}
font-weight
text-decoration
letter-spacing
line-height
text-align
을 사용합니다.left
, right
, center
, justify
(양쪽 정렬)block
줄바꿈이 되는 박스inline
줄바꿈 안되고, 크기지정 안됨inline-block
옆으로 붙는 박스 줄바꿈 없음<h1>
, <p>
줄바꿈이 되는 태그 -> block 박스<span>
줄바꿈이 되지 않는 태그 -> inline 박스padding
border를 기준으로 박스 내부의 여백을 지정p {
padding: 10px 20px 30px 40px;
}
border
테두리
border-width
) border-style
)border-color
)p {
border: 1px solid red;
}
margin
바깥 여백 p {
margin: 10px 20px 30px 40px;
}
p {
margin-top: -2rem;
}
overflow
속성의 auto
값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다.overflow-x
속성과 overflow-y
속성을 이용하면 두 방향을 모두 지정border-box
여백과 테두리 두께를 포함한 박스 계산 법*
해 box-sizing
속성을 추가하고, border-box
라는 값을 추가 * {
box-sizing: border-box;
}
border-box
계산법 기준