#HTML+CSS 영역
<head></head> #설정하는 영역
<body></body> #몸통
# 카카오 오븐
게시판을 만들거나 ppt를 만들거나 포트폴리오를 만들 때 포토샵이나 일러스트로 이미지를 만들고 배치하는데 시간이 오래 걸리기 때문에 간단히 화면을 구성할 수 있는 무료 툴.
# 경로 설정
절대경로
주로는 상대 경로 사용
./image/ex .점 하나는 현재 위치
../d0115/image/ex ..점 두개는 상위폴더 위치
-style.css (..image/naver.jpg)
js
fonts
audio
video
index.html
sub1.html
#div : division, divide, div가 사실상 제일 많이 쓰는 태그
#display:block(구역); inline( 그때마다 즉시 처리하는, 직렬의, 일렬로 늘어선);, inline-block;
#display, float, position : 배치 + margin, padding(간격)
이 세가지만 할 수 있으면 고정형 페이지는 만들 수 있다.
#웹디자인기능사 문제 와이어프레임 설정방법
<div id='wrap'>
</div>
1.wrap전체틀 가로 1200, 세로 700, 색깔, 가운데 정렬(margin:0 auto)
2.header, slide, contents, footer
가로 1200, 세로 100
가로 1200, 세로 300
가로 1200, 세로 200
가로 1200, 세로 100
세로배치, wrap안에 세로 분할
3.header가로 분할 로고, 네비게이션
float:left로 가로 분할
4.contents가로 분할 contents1, 2, 3(가로 크기는 마음대로)
40%(480px), 30%(360px), 30%(360px)
5.footer가로 분할 로고, 카피라이트, SNS
1) A형 문제 와이어프레임
2) B형 문제 와이어프레임
'Coding 공부 > HTML+CSS' 카테고리의 다른 글
| [HTML+CSS_Summary] position, 이미지 삽입, 로고 삽입, i class, 동영상 삽입 (0) | 2024.01.29 |
|---|---|
| [HTML+CSS]text-decoration, list-style-type, font-weight, float, display: flex;,flex-wrap: wrap; (0) | 2024.01.26 |
| [HTML+CSS] calc, padding, order-radius, text-align, box-sizing (2) | 2024.01.26 |
| [HTML+CSS_Summary] 클래스 선택자, 스팬, 리스트, 마진, 이미지 삽입 (0) | 2024.01.24 |
| [HTML-CSS] Style_Block, Inline, Inline-bock (0) | 2024.01.15 |
댓글