TIL 1 - HTML, CSS (1)

5368 단어 htmlWeCodeCSSTILCSS

지난 겨울 열심히 배웠던 웹개발
시간이 너무 오래 흘러서인지 벌써 많이 까먹었다ㅠㅠ

이번 기회에 복습하면서 다시 기본기를 쌓아보아야겠다.

HTML

  • 풀어서 HyperText Markup Language
  • 웹은 인류의 가장 많은 디지털 정보가 생산되는 곳 & 퍼블릭 도메인
    그렇기 때문에 우리가 어느 브라우저에서든 똑같은 페이지를 볼 수 있다 (출처 : 생활코딩)

✔️ 기본 구조

<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<title> 제목 </title> 
</head>
<body>
</body> </html>
  • DOCTYPE : 문서의 유형을 정의하기 위해 사용하는 선언문. HTML 문서의 시작을 알려주며 어떤 버전으로 작성되었으니 해당 방식으로 해석하라는 의미를 지님
  • head : 페이지의 속성 정보를 담고 있음
  • body : 페이지의 실제적인 내용을 담고 있음
  • title : head 안에 들어가는 태그로 제목표시줄 내용을 나타냄
  • meta : 페이지에 대한 설명을 표시함. 속성으로 charset = "utf-8"라고 기재한 것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 알린 것. 이 부분이 있어야 한글이 안 깨짐

✔️ 주요 태그

  • h1 ~ h6 : body 안에서 제목을 표시하는 태그. 숫자가 커질수록 크기가 작아짐.

    • 사용하면 위아래에 자동으로 줄이 띄어짐
    • p를 사용해서도 모든 내용 표시할 수 있지만 h 태그를 썼다는 것은 해당 정보가 문서 내에서 중요한 역할을 한다는 것을 의미하므로 써주는 게 좋음

  • div : 구역을 표시하는 대그

  • p : 문단을 표시하는 태그

    • 사용하면 위아래에 자동으로 줄이 띄어짐

  • img : 이미지를 표시하는 태그

    • src : 이미지의 경로
    • alt : 이미지의 경로가 잘못되었거나 파일이 깨졌을 때 나오는 메세지를 입력하는 부분

  • br : 한 줄 띄는 태그

  • a : 클릭 시 다른 페이지로 이동시켜주는 태그

    • href : 주소
    • target : 새 창을 어디 띄울 것인지

  • ul : 순서가 없는 리스트 태그

  • ol : 순서가 있는 리스트 태그

 <!-- 예시 -->
 <img src="https://usercontents-c.styleshare.io/images/14933251/640x640">
 <a href="https://www.naver.com">네이버</a>

🔔 HTML 공간의 종류 3가지

(1) Block : 한 줄을 통째로 차지함 ex: div
(2) Inline : 내용물의 길이만큼 차지함. 높이랑 너비 지정할 수 없고 패딩과 마진 줄 수 없음 ex: span
(3) Inline-block : 내용물의 길이만큼 차지함. 그리고 css 통해서 높이와 너비 지정할 수 있음 

<div style="display:inline-block;width:30%;height:50px;background:yellow"></div>
EF 코어 다중 데이터베이스 공급자
나의 첫 번째 어셈블리 언어 프로그램:HelloWorld

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage