display : block ->인라인 레벨 요소를 블록레벨 요소로 만든다. display : inline ->블록레벨 레벨 요소를 인라인 요소로 만든다. display : inline-block ->인라인과 블록의 속성을 모두 가지고 있고 마진과 패딩을 지정할수 있다. display : none ->해당 요소를 화면에 표시 하지 않는다.
내비게이션 구성할 때 <nav>라는 태그를 사용합니다
인라인 블록 걸어서가로로
p태그 넣고 이미지 나란히 하고 싶은데
p태그는 블록레벨이라 이미지와 나란히 한줄못써
그럴때는 플롯이라는 속성이용하면돼
거기서 이미지 표시하고 주변에 택스트 감싸게
float : left ->해당 요소를 문서의 왼쪽에 배치 right->해당 요소를 문서의 오른쪽에 배치 none->좌우 어느쪽에도 배치하지 않는다 default
플롯은 웹요소를 붕떠있게하는 거 그게 왼쪽구석이냐 오른쪽구석이냐 플롯 레프트 롸이트 아무것도 아닌 none
이렇게 3개있음
이렇게 왼쪽 배치하면
그다음에 넣는 애들도 똑 같은 속성값 반영되어버림
내가 플롯요소를 하나에만 넣고 싶은데 밑에 해제안하면
밑에도 전달됨
그래서 플롯 속성더이상 유효하지 않다는 속성 넣어줘야함
클리어!!
clear left -> float left 해제 right-> rigt해제 both->둘다해제
왼쪽부터 차례대로 정렬됨배치됨
근데 3은 플롯 지정안해서
웹브라우저 기본 흐름대로 배치된거.
클리어주면!!
클리어 주면 이렇게~
플롯레프트랑 인라인블록이랑 뭔차이냐~
눈으로는 동일. 똑같이 가로 배치
근데인라인블록은 차이가 있어.
결과화면은 같은데
인라인 블록으로 세팅하면 가로로 배치를 하긴하지만
마진이랑 패딩값을 기본으로 갖고 있고
플롯으로 배치하면 가로배치될 때 마진이랑 패딩값이 없어
플롯으로 요소 배치할 때 만약 마진이랑 패딩필요해 그러면 지정 별도로 해야되고
클리어 속성으로 플롯레프트 해제해야한다.!!
플롯이랑 클리어 속성 잘 쓰면 레이어만들 때 잘 활용할 수 있다
미리 레이아웃 그림으로 그려놓고 세팅하는게 제일 좋다! 헤더는 주로 웹페이지 상반부
본문은 메인컨텐츠
레이아웃짤 때 미리 구성해~
제목 위에 들어가기
카테고리 나타낼거 사이드바.
본문 메인 컨텐츠영열
Footer 맨 밑에 들어갈거
이런식으로웹브라우저 기본값 리셋하는 거임
컨테이너 내용전체 너비
내가 따라 하면서 안됐던게
처음에 정한 전체 너비보다
사이드바, 본문의 두 너비 합한 게 커서 그랬음(그래서 플롯써도 옆에와서 안붙고 밑에 있었음)
근데 처음에 전체 컨테이너 잡을 때 너비만 지정하고 세로값은 안줘서 궁금함..
position static : 문서의 흐름에 맞춰 배치.default (위치를 지정해서 배치) relative : 위칫값을 지정할수 있다는 점을 제외하면 static absolute : relative값을 사용한 상위요소 기준으로 위치를 지정해서 배치 fixed : 브라우저 창을 기준으로 위치를 지정해 배치 (고정역할)
absolute를 사용할때 주의해야 할점
위치값을 지정하면 요소중에서 relative를 사용한 요소를 기준으로 위치를 지정....
만약 부모요소중에 없으면 상위요소를 찾고 이것마저 없으면 더 위의 요소를 찾는다.
absolute를 쓰고 싶다면 부모요소에 relative를 지정해야 원하는 대로 배치할수 있다.
바디 기준으로 왼쪽, 위쪽에서 50픽셀만큼 떨어지게
화면을 줄여도 고정되어있는 사각형
만들기~~
relative-2를 (100에서 200으로 바꿨지만) 왼쪽 200 위로 -50고정~
Absolute를 사용할 때 주의할점
위치값을 지정하면 요소중에서 relative를 사용한 요소를 기준으로 위치를 지정함…
만약 Absolute을 준 요소, 의 상위를 찾는데 만약
근데 그 위에 요소도 없어 그러면 더 위에 올라가서 찾게 됨.
(=만약 부모요소에서 없으면 상위요소를 찾고
이것마저 없으면 또 위로 올라가서 찾아~
할아버지 찾고~)
결론 어떠한 요소에 Absolute를 쓰고 싶다면
부모 요소에 반드시 relative를 지정해야 원하는대로 배치할 수 있다.
background-repeat repeat : 브라우저 화면에 가득찰때까지 가로세로 반복 default repeat-x : 브라우저 화면 너비에 가득 찰때까지 가로로 반복 repeat-y : 브라우저 화면 높이에 가득 찰때까지 가로로 반복 no-repeat : 한번만 표시하고 반복 ㄴㄴ
background-position : 배경이미지의 수평,수직 위치값을 설정할수 있음.
값두개있는거-> 레프트는 수평 center는 수직
하나있으면 수평위치값 (수직 위치값은 50이나 센터로 간주)
사실 50,센터? 하는 말 다 적긴했는데 지금보니 뭔소리인지 잘모르겠네
박스 모델에 패딩이나 테두리가 있다면 배경이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시 할수 있음. 배경 이미지를 적용할 범위는 background-origin속성으로 지정함. content-box : 박스 모델에서 내용부분에만 배경이미지 표시 default adding-box : 박스 모델에서 패딩까지 배경 이미지 표시 border-box : 테두리까지...
