개발자 도전기
[국비지원] 1일차 수업-HTML, CSS 본문
오늘 수업 요약
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
들여쓰기, (음수값이면) 내어쓰기
*
아르바이트 하느라 이전 수업을 이틀간 빠졌는데
아무래도 진도 따라가기가 조금 벅차다ㅎㅎ
그래도 열심히 해보자 화이팅!
'개발공부 > TIL' 카테고리의 다른 글
| [공부 기록] (0) | 2024.02.09 |
|---|---|
| [국비지원] 6일차 수업 - 개인 작업 (1) | 2024.02.09 |
| [국비지원] 4일차 수업 - Jquery (0) | 2024.02.06 |
| [국비지원] 3일차 수업- Jquery (0) | 2024.02.06 |
| [국비지원] 2일차 수업 - display, position, margin (0) | 2024.02.04 |
'개발공부/TIL' Related Articles
more
