@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 400px) {
}
최소영역은 반대
작은 영역에서 큰영역으로 순서 써야함..
중앙정렬
중앙정렬할 때
마진 오토가 안먹혀서 뭔가 했더니 가로값을 주어야했다!!
position: fixed;
/* fixed를 쓸 때에는 width, height를 명시해줘야 한다. */
width: 460px
/* left, right는 해당 요소의 위치 시작점을 결정한다. 그런데, 이때, margin의 양 값을 auto로 줌으로써 마진을 주어 해당 요소의 양 끝 위치를 각각 0으로 만들어준다. */
margin: 0 auto;
left: 0;
right: 0;
content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
content-boxCSS 표준이 정의한 초기 기본값.width와height속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는370px입니다.요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.border-boxwidth와height속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는350px입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로border-box를 사용해 요소를 사라지게 할 수는 없습니다.요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.
-(마이너스)값은 왼쪽에 그림자를 지정한다. ㆍy-offset: 아래쪽에 정해진 수치만크의 크기로 그림자를 지정한다.
-(마이너스)값은 위쪽에 그림자를 지정한다. ㆍblur : 정해진 수치만큼 그림자가 흐려지는 정도. t생략가능, default, 숫자가 클수록 흐려짐 ㆍcolor : 그림자의 색상 지정. #FEFEFE 또는 rgba(0, 0, 0, 1) 방식 모두 사용 가능 ㆍrgba의 a값은 불투명도를 의미. 숫자 1은 원색 . 0.5 혹은 .5는 50%를 뜻한다.
요소가 여러 개 나열되어 있는 경우에는 굳이 class나 id를 쓰지 않고 스타일을 지정(몇 번째인지 구분해서)할 수 있다.
only-child : 부모 안에 자식요소가 하나만 존재할때 자식 요소를 선택 first-child : 부모안에 있는 요소중에서 첫번째 자식을 선택 last-child : 부모안에 있는 요소중에서 마지막 자식.. nth-child(n) : 부모안에 있는 모든 요소 중에서 n번째 자식을 선택 nth-last-child(n) : 부모안에 있는 모든 요소 중에서 끝에서 n번째 자식을 선택
A:only-target-of : 부모안에 A요소가 하나만 있을때 A:first-of-type : 부모안에 있는 A요소 중에서 첫번째 요소 선택 A:last-of-type : 부모안에 있는 A요소 중에서 마지막 요소 선택 A:nth-of-type(n) : 부모안에 있는 A요소 중에서 n 번째 요소 선택 A:nth-last-of-type(n) : 부모안에 있는 A요소 중에서 끝에서 n 번째 요소 선택
가상클래스 선택자 :link 방문하지 않는 링크에 스타일 적용 :visited 웹문서의 링크중에서 한번 이상 방문한 링크에 스타일 적용 :hover 마우스 포인터를 올려놓을 때 스타일 적용 :active 웹요소의 링크나 이미지등을 활성화 했을 때, 클릭햇을 때 스타일을 지정 :focus 웹 요소의 초점이 맞추어져있을 때 스타일 적용
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 : 테두리까지...
<span> HTML <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. <span>은 <div>와 매우 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소입니다.
상대경로- 이미지 삽입할 HTML문서 기준으로 경로 인식(, 내 컴퓨터파일에 있는 사진경로)
하위폴더로 이동하는 법: 하위 폴더명 적어주고 /
상위,하위폴더 뭔말인지는 모르겠지만 경로찾는 법은 밑에걸 써서 했음
../ 는 상위폴더로 이동하는 법
이미지 파일이랑 html파일이 다른 폴더에 있으면 이미지 파일경로 넣어줘야함!!
alt는 이미지 깨졌을때 안내문구 width 너비 height 키
png 원본손실이 없는 무손실 압축, 일반적으로 웹에서 가장 많이 사용 jpg 손실압축으로 사진 이미지의 압축 효율이 좋음 주로 사진 이미지를 저장하는데 사용 gif 애니메이션을 지원함, 짤 svg (일반적으로는 잘 안쓰지만) 안깨져 raw 압축 이전의 확장자, 원본파일, 한 픽셀에 대해서 rgb색값이 있음 (->raw모드로 이번 포스터촬영해서 용량거덜났잖아 나..)
