html기초와 display 속성

슬·2025년 1월 16일

html,css

목록 보기

1/8

hmtl이란?
웹페이지를 표시하기 위해
마크업의 의미는 구조를 잡는다는 의미다.
페이지의 구조를 잡는다는 의미

특징 : 태그를 사용한다.

마크업, 마크다운은 문법의 차이가 있을 뿐이다. 마크다운이 좀 더 경량화 되어있음.

하지만 태그를 다 안다고 해서 html을 안다고 하는 것은 아니다.
그렇다면 우리는 태그를 왜 사용할까?
사실 태그는 사람이 검색을 위하는 것이 아니라 컴퓨터를 위한 것입니다. 컴퓨터가 이해할 수 있도록

css 역할

스타일에 관한 역할을 하잖아요
html태그들이 배우라면 css는 스타일리스트!!!
그리고 js는 감독이라고 생각하면 됩니다. 너는 어떻게 움직이고 이렇게 움직이고 동작을 시킨다.

스타일 단축키 있어용~
bgc
fz
fw

lorem을 작성해서 탭키를 누르면 긴 글이 나오는데 테스트 할 때 긴 글이 필요하면 이런식으로 사용할 수도 있어요

헥사코드?
rgb 백그라운드

css는 컬러나 사이즈 이런걸 공부하면 되는게 아니라 요것들을 공부하면 됩니다.

display : block;
float : left;
position : absolute;
flex : start;

html, css는 사실 직관적으로 눈에 보이는 것을 공부하는게 아니라 이렇게 딱 봤을 때 이해하기 어려운 것들을 공부하는 것이다. 요것들만 알아도 레이아웃을 만들기 쉽다.

지디웹
내가 잘 하고 있는지 의문이 들 때면 레퍼런스들을 많이 보는걸 추천해요.
지디웹에서 web부문을 보면 좋습니다.

알아야 하는 것은 이거밖에 없다.
이 속성들이 눈에 익어야 많은 도움이 된다.

div nav article section 이 모두는 사실 기능적으로 별 차이가 없지만 사용적으로 이해하기 쉬우라고 구분을 해놓은 것 뿐이다.

시맨틱 태그 : 태그의 목적을 부여하는 것

ul ol 순서가 없는 리스트인지 순서가 있는 리스트인지 차이일 뿐

이렇게 했을 때 나타나지 않는 이유는 내용이 없어서가 아니라 높이가 없어서다!!!!!!
컨텐츠를 감쌀 높이가 생겨서 나타난것 뿐!

<div></div>
<section></section> display : block; 이 기본값.
근데 사실 외울 필요는 없고 그냥 한번 해봐라!
변화가 없다? 그럼 그게 기본값인거다.

정리