HTML

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

오구리 2019. 2. 4. 00:34
728x90
반응형

*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.위치,레이어 이동 가능




반응형