Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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 31
Tags more
Archives
Today
Total
관리 메뉴

블로그

코딩공부)HTML_웹표준 13일차 position/static/absolute 본문

HTML

코딩공부)HTML_웹표준 13일차 position/static/absolute

오구리 2019. 2. 4. 00:34

*border-width:1234(보더 네방향 길이를 다르게 준다.)

*border-color


-실습*

# - id - 태그의 구분

.class - 효과주기

p,a,{}는 p와 a에게 같은효과를 주기

a{} - 공백 앞에꺼 안에 a가 있다면

.f1 ul li{} - 클래스가f1이라는 태그에 ul 안에 들어있는 li가 있다.



line-height :  글자를 중간으로 정렬


div #header

<div id="header">

div중에 어떤태그가 헤더


div #header{}

<div>

<?? id="header">

블록의 높이는 명목상 - 부모 자식 길이 같아서 옆으로 붙음




**position

1.움직이는 방법

2.위치 속성과 함께 사용


* 위치 속성

1.top/right/bottom/left

2.position 속성이 없는 경우 이동 불가

 (값이 static인 경우 제외)

3.기준의 속성명 위치에서 대상의 속성명 위치까지의 거리


flaot > margin:auto(+width)


<body>

<div id="header">

logo,gnb,topmenu

</div>

</body>


inherit : 부모 포지션 따라해




**position 속성값


*static - 움직이지 말라는 방법

1.기본값

2.지정된 요소를 일반 요소(p,h 등)처럼 사용

3.위치,레이어 변경 불가

4.태그가 작성된 순서대로 배치

5.margin:auto 사용 가능


반응형

움직이지 말라는 방법



*absolute

1.위치 독립적 - 다른 요소의 영향 받지 않음

2.동일한 기준 안에서는 모든 요소가 동일한 기준점 사용

3.margin:auto 사용 불가

4.위치,레이어 이동 가능




'HTML' 카테고리의 다른 글

코딩공부)HTML_웹표준 15일차  (0) 2019.02.04
코딩공부)HTML_웹표준 14일차 레이어/relative/기준의 정의  (0) 2019.02.04
코딩공부)HTML_웹표준 12일차 margin/padding/float/clear2  (0) 2019.02.04
​​​​ 코딩공부)HTML_웹표준 11일차_요소레벨,레이아웃 기본구조  (0) 2019.01.13
​​​​ 코딩공부)HTML_웹표준 10일차_table,form태그  (0) 2019.01.13
'HTML' Related Articles more