개발공부/TIL
[국비지원] 1일차 수업-HTML, CSS
jnnjnn
2024. 2. 1. 23:44
오늘 수업 요약
div 태그를 사용하여 레이아웃을 구성하고 글과 사진을 배치하였고
css의 cursor와 :hover를 사용하여 커서를 올려놓으면 배경색과 글자색이 바뀌는 기능과
자바스크립트로 클릭을 하면 화면이 바뀌는 기능을 구현해 보았다.
확실히 화면과 상호작용을 할 수 있으니 프로그래밍을 했다는 느낌이 든다
배운 내용 정리
<!DOCTYPE html> : 해당 파일이 html5 웹 표준 문서로 작성되었다는 것을 나타냄
block 요소 : 한 줄에 하나의 태그만 온다 (div, p, ul)
inline 요소 : 한 줄에 여러개의 태그가 온다 (span, img)
display: 화면 배치 방법
- flex : 인라인 요소로 배치함
- block : block 요소로 배치함
justify-content : 요소를 크기에 맞게 정렬
- space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줌
- space-between : 아이템들의 사이에 균일한 간격을 만들어 줌
flex-wrap : wrap
기본이 no wrap 상태로 화면이 부족하면 줄바꿈을 해 줌
text-indent
들여쓰기, (음수값이면) 내어쓰기
*
아르바이트 하느라 이전 수업을 이틀간 빠졌는데
아무래도 진도 따라가기가 조금 벅차다ㅎㅎ
그래도 열심히 해보자 화이팅!