HTML, CSS

HTML 기초 

HTML이란? HyperText Markup Language의 약자, 웹페이지의 틀을 만드는 마크업 언어.

 

✔ 개요

• HTML의 기본 구조와 문법을 설명할 수 있다.
• HTML이 마크업 언어라는 것을 설명할 수 있다.
• 자주 사용되는 HTML 요소를 활용할 수 있다.
  • div, span, ul, ol, li, input, id, class 등
• 시맨틱 태그에 대해 설명할 수 있다.

HTML의 기본 구조와 문법을 설명할 수 있다

HTML은 tag들의 집합이다.

tag : 부등호로 묶인 HTML의 기본 구성 요소

태그에 세부 내용이 없다면(<tag></tag>와 같이 표현되는 경우)는 <tag/>와 같이 표현가능

 

HTML이 마크업 언어라는 것을 설명할 수 있다.

마크업언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다

태그를 이용해서 문서나 데이터 구조를 명기하기 때문에 HTML은 마크업 언어라는 것을 알 수 있다.

 

자주 사용되는 HTML 요소를 활용할 수 있다.

<div> 한줄을 차지한다.

<span> 컨텐츠 크기만큼 공간을 차지한다.

<img> 이미지를 삽입한다

<a> 링크를 삽입한다.

<ul> <ol> <li> 리스트화 한다

<input> 입력폼들을 삽입한다 // 닫는 태그가 필요없다.

<textarea> 줄바꿈이 되는 입력 폼

<button> 버튼

<p> 하나의 문단을 표현하기 위해서 사용한다.

<section> 묶어서 하나의 구역을 구분하는데 사용한다.

<hr> 수평선을 추가한다.

<h1~5> 제목을 작성한다.

 

시맨틱 태그에 대해 설명할 수 있다.

시맨틱태그는 의미가 있는 태그를 말한다. div나 span과 같이 의미가 없는 태그는 이름만 보고 어떤 내용인지 유추 할 수 없지만 form, table, article 등 의미가 있는 태그는 내용을 정호가하게 정의한다.

 

CSS 기초 

CSS란? Cascading Style Sheets의 약자, CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어.

 

✔ 개요

• CSS를 왜 사용하는지 설명할 수 있다.
• CSS의 기본 문법과 구조를 설명할 수 있다.
• HTML에 CSS를 적용하는 방법에 대해 이해할 수 있다.
• id 및 class와 관련된 selector 규칙을 이해할 수 있다.
• CSS를 이용해 텍스트를 꾸밀 수 있다.
• CSS에서 쓰이는 두 가지 단위를 설명할 수 있다.
  • 각 단위가 어떤 경우에 적합한지 설명할 수 있다.
• CSS Box Model을 이해할 수 있다.

 

CSS를 왜 사용하는지 설명할 수 있다.

CSS는 효율적으로 사용자 인터페이스(UI)를 구성함으로써 더 나은 사용자 경험(UX)를 제공하기 위해 사용한다.

즉, 디자인을 위해서 사용한다.

 

CSS의 기본 문법과 구조를 설명할 수 있다.

출처: 코드스테이츠

HTML에 CSS를 적용하는 방법에 대해 이해할 수 있다

html의 문서에 작성하는 방법도 있지만 따로 css파일을 만들어서 추가하는 방법도 있다.

 

<link rel="stylesheet" href="index.css" />

를 사용해서 css파일을 html파일하고 연결 시키면 된다.

 

id 및 class와 관련된 selector 규칙을 이해할 수 있다.

태그에 따로 id 나 class를 지정해서 개별적으로 바꿀 수 있다.

id에 대한 요소는 #을 이용해서 지정할 수 있고

class에 대한 요소는 .을 이용해서 지정할 수 있다.

 

id와 class의 차이점
id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류에 사용

 

CSS를 이용해 텍스트를 꾸밀 수 있다.

 

색상을 변경하는 속성은 color이다. 속성에 삽입할 수 있는 값은 HEX 또는 주요 색상이름으로 사용 할 수 있다.

.color {
  color: #ff0000; /* color: red; 도 가능 */
}

배경 색상이나 박스 테두리 색상도 적용 가능하다.

.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;
}

CSS에서 쓰이는 두 가지 단위를 설명할 수 있다.

1. 기기나 브라우저 사이즈등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우는 px(픽셀)을 사용한다.

px은 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 불리하다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

 

2. 일반적인 경우는 상대단위인 rem을 추천한다.

브라우저의 기본 글자크기가 1rem이다. 사용자 접근성이 유리하다.

 

3. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우는 vw, vh를 사용한다.

 

CSS Box Model을 이해할 수 있다

HTML 문서의 레이아웃 (출처: 코드스테이츠)

 

margin, padding, border은 무엇인가?

margin, padding, border은 무엇인가? (출처: 코드스테이츠)