html의 속성에 대하여
![](https://blog.kakaocdn.net/dn/cR7EKM/btsEYA84AFw/IGodYm4i3YbO0aZ8pmpIOk/img.png)
html은 해드와 바디로 기본적으로 나뉘어져있으며 해드는 인터넷 주소창 윗부분을 표시하고
바디는 인터넷 창 안부분에 표시 할 것을 적어준다.
![](https://blog.kakaocdn.net/dn/bu38L6/btsEZcfyGF0/7IQM251HdORO1xtkoZxG31/img.png)
ctrl + / 누르면 드레그를 한 부분을 주석처리 할 수있다.
![](https://blog.kakaocdn.net/dn/qO8IY/btsEVNuELdn/TkNTeSu0FPI5jOsgGu2bR0/img.png)
개발자 도구에 확인가능 범위에 따른 확인 가능하다
![](https://blog.kakaocdn.net/dn/boRCzR/btsEY9399Hh/zMvvNFkj0NEi7nEEnCG8Zk/img.png)
코딩시 편리한 단축키들
css의 속성에 대하여
![](https://blog.kakaocdn.net/dn/cP77m3/btsEXoVo6O0/Q83iuNutKyWjIkBuPKfH51/img.png)
css는 html로 작성한 것을 꾸미는 명령이다.
명찰사용 : 여러가지 묶음 = class
클레스를 사용할 때에는 스타일 칸에 .으로 지칭을 한다.
명찰사용 : 하나만 지정 = id
아이디를 사용할 때에는 스타일 칸에 #으로 지칭을 한다.
![](https://blog.kakaocdn.net/dn/blirpY/btsE0il2ybY/hKKNxhs5knvuK25VL1Jfk1/img.png)
스타일에 사용할 수 있는 명령어들
각 속성 위치 조정
![](https://blog.kakaocdn.net/dn/tZjOf/btsEYWjCeJh/qAecKfKFCST3iA7GgPYWo0/img.png)
상속관계에 대해서 잘 알아두어야 한다
![](https://blog.kakaocdn.net/dn/TJgH4/btsEXnvmh8A/fwNgwFmzmk5QIwKUQjn7h0/img.png)
html box의 형태는 기본적으로 네모이며
block : 줄 (새로운것이 있으면 밑으로 쌓인다.)
inline : 글자 ( 새로운것이 있으면 옆으로 쌓인다.)
![](https://blog.kakaocdn.net/dn/cB1T35/btsEXuBc8G7/By2gNdSD31kKYzr4F9K26K/img.png)
스타일에 display : flex;를 입력하면 전부 가로로 정렬이 된다.
![](https://blog.kakaocdn.net/dn/bVQ136/btsEVNVKu7I/Nt75ncgbIrwMtvpBVg27ak/img.png)
justify-content: center; 입력하면 중앙으로 맞춤
![](https://blog.kakaocdn.net/dn/c3DpWT/btsE0g2Qkqt/JSMaT9mgtWjipe3YfrmIdK/img.png)
![](https://blog.kakaocdn.net/dn/NEUuj/btsEVK5SZbl/U5Jn8ALhcZMyBZY4B5ygUk/img.png)
flex를 사용하면 요소의 위치를 내가 원하는 방향으로 조정이 가능하다.
![](https://blog.kakaocdn.net/dn/ZWlqh/btsEWhPOP2s/CUTGAXQkodlmOsr6nQE7Ik/img.png)
개발자 모드로 들어가서 내가 원하는 모습을 미리 볼수도 있고 코드를 복사해서 바로 넣어줄 수 있다.
![](https://blog.kakaocdn.net/dn/pLduc/btsEXvfMxcQ/FkIrdBU0ushtNA7LACqxB1/img.png)
기본적인 홈페이지의 구조 및 명칭
![](https://blog.kakaocdn.net/dn/pdVnL/btsEV8yHCTL/j65Dp4Mke5UI8yVysX6xE0/img.png)
마진과 패딩의 차이를 잘 인식을 해서 공간을 나누어 주어야한다.
![](https://blog.kakaocdn.net/dn/dEPV0c/btsEVM3CxsY/TYkTizkPkW87NQYjcMuyEK/img.png)
굳이 일일이 style 안에 값을 적어줄 필요없이 바로 명령어 안에서 적어주어서 스타일을 변경해줄수 있다.
![](https://blog.kakaocdn.net/dn/bWzZ0G/btsEY85kbae/kmpwrnDVx4PpjaeQPL33Y0/img.png)
내가 만든 사이트
'AI 코딩 교육 TIL' 카테고리의 다른 글
2024-01-30 AI 코딩 TIL (0) | 2024.02.16 |
---|---|
2024-01-29 AI 코딩 TIL (0) | 2024.02.16 |
2024-01-25 AI 코딩 TIL (0) | 2024.02.16 |
2024-01-24 AI 코딩 TIL (0) | 2024.02.16 |
2024-01-23 AI 코딩 TIL (0) | 2024.02.16 |