| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- css선택자 #css #선택자 #selector
- float의문제점
- overflow속성
- 내컴퓨터아이피 #내컴퓨터아이피확인 #아이피확인 #컴퓨터아이피 #아이피주소확인
- 웹디자인기능사 #웹디자인기능사실기 #웹디자인기능사실기후기 #웹디자인기능사공부 #웹디자인기능사실기공부
- 연봉
- vertical-align #css표스타일
- 웹디자인기능사#웹디자인기능사실기#웹디자인기능사실기공부
- css속성 #float속성 #clear속성
- 무선마우스 #앤커무선마우스 #A7852
- 폰트어썸 #fontawesome #폰트어썸사용법 #폰트어썸사용하기
- 어도비XD #프로토타입 #햄버거메뉴 #슬라이딩메뉴
- 웹디자인기능사 #웹디자인기능사실기 #웹디자인기능사3회 #웹디자인기능사합격 #웹디자인기능사후기 #웹디자인기능사실기후기 #웹디자인기능사실기합격 #디자인자격증 #국가자격증
- 취업성공패키지 #취업성공패키지웹디자인 #취업성공패키지웹퍼블리셔 #웹퍼블리셔 #웹디자인 #국비지원웹디자인 #국비지원웹퍼블리셔
- 프리미어 #프리미어자동으로늘어나는글자 #프리미어글자 #프리미어자막 #프리미어자동자막 #프리미어자막넣기
- css텍스트스타일 #text-transform
- 앤커마우스 #버티컬마우스 #앤커버티컬마우스
- css그라데이션 #css
- css포지션 #포지션속성 #cssposition
- 소개팅어플
- css속성 #display속성
- 포트폴리오사이트 #포트폴리오 #웹디자인포트폴리오
- 크롬마우스우클릭 #크롬마우스우클릭해제 #마우스우클릭해제 #마우스우클릭확장프로그램 #크롬확장프로그램 #마우스우클릭허용 #크롬사진퍼가기
- css배경 #css백그라운드
- 인터넷익스플로러버전확인 #인터넷버전확인#인터넷버전검색#인터넷익스버전검색
- 미디어커리 #뷰포트
- 웹디자인기능사 #웹디자인기능사공부#웹디자인기능사실기
- 유튜브핀마이크 #핀마이크 #스마트폰마이크 #핀마이크추천 #PM100 #가성비핀마이크
- 직장인애환
- 웹디자인기능사 #웹디자인기능사실기 #웹디자인기능사실기공부
- Today
- Total
블로그
코딩공부)HTML_웹표준 11일차_요소레벨,레이아웃 기본구조 본문
*요소레벨(element level)*
태그가 어떻게 보여지는가에 대한 구분
줄이 바뀌는 태그&줄이 안바뀌는 태그
1.블록 레벨(Block Level)
- 독립된 행을 갖는 요소 집합
- 크기 지정,위치 조정 가능(*)
- p,h1~h6,ul,ol,li,div,table...
- 다른 블록 레벨 요소와 인라인 요소 포함 가능
- p,h,dt,address같은 일부 요소는 다른 블록 포함 불가
p,h,dt,address 같은 일부 요소는 다른 블록 포함 불가 - 인라인만 포함 할 수 있다.
1)독립된 행을 갖는 요소 집합
*Block Level Element
- default width : 100%(auto)
- default height : 0(auto)
너비는 100% 높이는 0 이지만 높이는 안에 콘텐트를 입려가면 자동으로 늘어남
규칙 : height라는 속성을 쓰면 안됨(쓰면 높이가 고정됨 박스 넘어감)
Overflow : 박스영역을 초과하는 콘텐츠를 처리하는 것 ex)overflow:hidden(중요)
*화면이 크던작던 넓이를 더씀 width:100% / 실제로는 auto라는 값
줄이 바뀌는 이유는 행전체를 사용하는 태그이기 때문
여백 space
(중요)
Overflow:hidden
Scroll : 스크롤생성됨
Auto : 넘치는방향으로만 스크롤 생성
2)크기 지정,위치 조정 가능(*)
3)p,h1~h6,ul,ol,li,div,table
문장 중간에 위의 태그 넣어보기
ex)요소 레벨은 태그가 <p class="brd">어떻게 보이는가에 </p>따른 구분입니다.
3)다른 블록 레벨 요소와 인라인 요소 포함 가능
인라인에서는 위치바꿈 안됨
<b><b1></b1><i></i></b>
css인라인과 html인라인은 다른점이 있다.
css적용방법
<head><style>~<style></head>(내부스타일internal style) - 자주쓰임
<element style="prop:value"> - 인라인방식의 스타일
NAME.css
<head><link href="NAME.css"></head>(외부스타일 liink style) - 자주쓰임
<style>
@import"NAME.css"(import style)
</style>
2.인라인 레벨(Inline Level)
- 범위 표시 요소의 집합
- 크기,위치 조정 불가(예외:img)
- a,em,strong,img,span(기능,뜻이없고 묶어주기만 - 내가 만든 별도의 효과를 적용 할 수 있게 해준다)
- 높이 속성 사용 불가
css속성중 일부는 요소레벨을 바꾸기도 한다.
a태그에 positon요소레벨 추가 inline-> blcok
임시로 바꿀 때 사용하는 속성 -> display
Flex,grid(최근에 나옴)
보통 display:none 사용 display는 -> 어떻게 보여라 라는 뜻 가진 속성/요소 레벨을 바꾸는 속성 많이쓰는 요소
- block
- inline
- inline - block(한줄에(inline처럼) 크기지정(block처럼)하고싶을 때 사용)
Element(tag) Level - Block Level
- Inline Level
Span -> (block) div
<- (inline)
5)p,h,dt,address 같은 일부 요소는 다른 블록 포함 불가
p,h,dt,address 같은 일부 요소는 다른 블록 포함 불가 - 인라인만 포함할 수 있다.
(x)
<p>
<div>블록 요소는 블럭요소와 인라인요소를 포함할 수 있습니다.
</div>
</p>
**레이아웃**
각각의 요소들을 필요한 자리에 위치하기
header
content(main)
Footer
**레이아웃 기본 구조**
1.header
- 상단 로고,GNB,topmenu 등
- 주로 페이지 안내(이동)에 관한 요소 포함
- 홈페이지 모든 페이지에 노출
- GNB : Global Navigation Bar - 메뉴바
2.content(main)
- 페이지별 내용,LNB,배너,게시판,퀵메뉴 등
- 해당 페이지에서 나타내고자 하는 내용 작성
- LNB : Local Navigation Bar - 사이드 메뉴
메인메뉴(대메뉴)에 포함된 하위메뉴(소메뉴)의 집합
3.footer
- 회사나 사이트에 대한 정보
- 각종 연락처,관리자 정보,카피라이트 등
4.기타 요소(sns 검색,관련 사이트 등)는 필요한 위치에 추가
id - 요소의 구분
Name - 폼태그
Class- css
- next
Float,position
레이아웃에 관련된 css속성
element.html'HTML' 카테고리의 다른 글
| 코딩공부)HTML_웹표준 13일차 position/static/absolute (0) | 2019.02.04 |
|---|---|
| 코딩공부)HTML_웹표준 12일차 margin/padding/float/clear2 (0) | 2019.02.04 |
| 코딩공부)HTML_웹표준 10일차_table,form태그 (0) | 2019.01.13 |
| 코딩공부)HTML_웹표준 9일차-웹접근성검사 (0) | 2019.01.13 |
| 코딩공부)HTML_웹표준 8일차 (0) | 2019.01.06 |
