HTML과 CSS의 기초 개념

🏁 기타/코드프레소 체험단_BE

HTML과 CSS의 기초 개념

Dhey 2022. 1. 28. 03:30

HTML

(Hypertext Markup Language)

Hypertext → 서로 연결될 수 있고

Markup → 정보를 구조적으로 표현하는

Language → 프로그래밍 언어

- HTML은 정보를 구조적으로 표현하기 위해 Tag라는 개념을 사용한다. (ex. <html> </html>, <strong> </strong> ···)

HTML의 기본 구조

≫ HTML 문서는 계층형 구조이다.

- html tag: 최상위 태그

- head tag: 문서의 부가 정보를 담는 태그

- body tag: 문서의 컨텐츠를 담는 태그

HTML의 기초 Tag 중 전에 정리하지 않았던 Tag들만 정리해보려 한다.

HTML의 기초 Tag

· 문장 사이에 줄 바꿈하는 Line Breaker

- <br /> → single Tag임(<br> or <br /> 둘다 사용 가능)

· 특정 문자를 강조

- <b> bold </b>

- <strong> (웹 접근성, 음성강조 등) </strong>

· 특정 문자를 Italic체로 변환

- <i> 단순 Italic체 처리 </i>

- <em> 중요한 text 표시(웹 접근성, 음성강조 등) </em>

· 특정 문자에 언더라인 표시

- <u> Underline </u>

· Table 만들기

- <table> 하나의 전체 표를 생성 </table>

- <tr> 표 내부의 1개의 행 </tr>

- <td> 실제 데이터가 들어가는 표 내부 1개의 셀 </td>

- <th> 표의 제목 셀을 볼드체로 처리 </th>

- <caption> 표의 설명 추가 </caption>

- <table border = x> → 표의 테두리 두께 지정

· 데이터를 List 형태로 표현하기

* HTML의 List는 unordered list와 ordered list 두 가지 종류가 있다

- <ul> unordered list </ul>

- <ol> ordered list </ol>

오) 각 list 내의 아이템은 <li> ... </li> 태그로 나열하여 정의한다.

* <ul> 태그 내에 style attribution을 활용하여 다양한 효과를 지정할 수 있다. (* list-style-type : 프로퍼티로 정의 필요)

* <ol> 태그 내에 type attribution을 활용하여 다양한 효과를 지정할 수 있다.

· input을 받는 Form Tag

- <form> 전체 입력 페이지 </form>

* 사용자로부터 입력 받을 각각의 정보는 <input> 태그의 type 속성으로 지정

CSS
(Cascading Style Sheets)

HTML 문서를 시각적으로 꾸미는 기능에 집중하는 기술

- HTML 문서 안에 <style> ... </style> 태그를 생성한다.

- <style> 태그 내에 CSS 코드를 삽입한다.

(* 어떤 태그에 어떤 효과를 적용할 것인가?)

body 태그에 background-color를 yellow로 하겠다는 의미

- 효과는 속성(property)과 값(value)으로 구성된다.

(속성과 값은 콜론(:)으로 구분되고, 1개의 효과 끝에는 세미콜론(;) 표기를 해야한다.)

- 특정 태그에만 효과를 지정하고자 할 때, 태그에 id 또는 class 값을 지정하여 이용한다.

1. id로 적용 대상 지정하기

- 대상 지정하는 방법: # 뒤에 id명 입력

2. class로 적용 대상 지정하기

→ 동일한 효과를 여러 태그에 한번에 지정할 때 활용 가능

- 대상 지정하는 방법: . 뒤에 class명 입력

코드프레소 Java 웹 개발 체험단 활동 중 'Spring Boot 웹 개발 입문' 이러닝 강의를 듣고 작성하였습니다 :)
코드프레소 URL: https://www.codepresso.kr/

프리미엄 IT 교육 서비스 - 코드프레소