TIL: 1일차 "HTML&CSS"

HTML (HyperText Markup Language)

웹페이지를 구성하는 가장 기초적인 언어

브라우저에게 컨텐츠의 구성을 설명하기 위한 언어

태그(<>)로 감싸여진 언어

태그(<>)란?

HTML을 이용해 명령을 내리기 위한 명령어로서
<>기호 안에 특정 명령어를 입력하는것으로
문서에 속성을 부여 할 수 있다.

Tag의 예로서

head : 웹사이트에 보이지 않는 정보를 입력하는 태그

body : 웹사이트 본문이 되는 태그

div : 문서의 컨텐츠를 블럭 요소로 분할하는 태그

span : 한줄 정도의 구문을 작성하는 인라인 태그

h1 : 제목을 나타내는 가장 큰 태그

p : 문단을 나타내는 태그

a : 문단에 링크를 작성하는 태그

블럭요소와 인라인 요소

블럭 요소(Block Level Element)

블럭요소는 body태그 안에서 한줄에 하나로 입력되며
요소 안에 다른 블럭 요소를 포함하는 것이 가능하다.
때문에 HTML을 작성하며 많은 빈도로 사용 되지만,
남용 되면 문서의 전체적인 구성을 읽기 힘들어지게 만든다.

인라인 요소(Inline Level Element)

인라인 요소는 요소를 구성하는 태그에 할당된 공간만을 차지하는 요소로서 블럭과 다르게 문단의 전체적인 흐름을 해치지 않는다는 특징이 있다.
인라인요소에는 짧은 형태의 구문이나 img등 한줄로 표현 되는 태그가 포함된다.

참고자료 사이트 -> 여기로!
(한글로 된 페이지도 있지만 기본적으로는 영문페이지)

CSS (Cascading Style Sheets)

HTML로 쓰여진 문서에 다양한 스타일을 부여하는 시트

Cascading이라는 말처럼 위에서 아래로 적용됨

CSS에서 Cascading의 의미

CSS에서는 위에서 선언 된 HTML태그가 아래에서 선언된 태그와 부여된 속성이 겹치게 된다면, 아래에서 적용된 CSS속성이 위에서 부여된 속성을 덮어쓴다. 이러한 특징때문에 폭포라는 뜻의 Cascading이란 이름이 붙게 되었다.

CSS 작성법

CSS를 작성할때엔 선택자를 선언하고 그 뒤에 속성과 값을 입력하는 구성을 취하고 있다.
선택자에는

* : 모든 속성을 지정

HTML태그 : 선언된 HTML태그를 지정

.(class) : HTML에서 선언된 class를 지정

#(id) : HTML에서 선언된 id를 지정

부여하는 속성의 예시로는

color : span등의 인라인 요소의 색을 변경

border : 블럭요소의 테두리를 설정 혹은 변경

margin : border 바깥쪽의 여백을 조정

padding : border 안쪽의 여백을 조정

이외에도 많은 속성이 있기때문에 필요하다면 MDN에서 검색을 하며 어떤 속성이 있는지 사용해보며 익숙해질 필요가 있다.