Hi

사이트 참조https://www.w3schools.com/css/css_max-width.asp

max-width max-width 예시를 보는게 더 빠른듯ex) Set the maximum width of a element to 150 pixels: p.ex1 { max-width: 150px; }

미디어 쿼리의 조건 미디어 쿼리의 조건 웹 문서의 가로 너비와 세로 높이 뷰포트 : 실제 웹 문서의 내용이 화면에 보이는 영역 가로, 세로 값 설정하는 속성 설명 width, height 웹 페이지의 가로 너비, 세로 높이 min-width, min-height 최소 너비, 최소 높이 max-width, max-height 최대 너비, 최대 높이 ex) 뷰포트의 너비 600px 이상, 959px 이하 @media all (min-width: 600px) and (max-width: 959px) { ... } 단말기의 가로 너비와 세로 높이 속성 설명 device-width, device-height 단말기의 가로 너비, 세로 높이 min-device-width, min-device-height 단말기의 ..

미디어 쿼리 구문 미디어 쿼리 구문 기본형 @media [only | not] 미디어 유형 [and 조건] * [and 조건] ex) @media screen and (min-width: 200px) and (max-width: 360px) { ... } 연산자 설명 and 조건을 계속 추가할 수 있습니다 ,(쉼표) 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용해 추가 only 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 합니다. 이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다. not not 다음에 지저하는 미디어 유형을 제외합니다. ex) 'not tv’라고 지정하면 TV를 제외한 미디어 유형에만 적용 ..

, , 태그 A description list, with terms and descriptions Coffee Black hot drink Milk White cold drink

사용자 동작에 반응하는 가상 클래스 :link 방문하지 않은 링크에 스타일 적용 :visited 방문한 링크에 스타일 적용 :hover 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용 :active 웹 요소를 활성화했을 때의 스타일 적용(마우스 누르고 있을 때) :focus 웹 요소에 포커스가 맞추어졌을 때의 스타일 적용 (마우스 커서를 갖다 놓거나 Tab 해서 커서 갔을 시) 1~4번 모두 정의시 순서대로 정의해야한다. (순서 바뀌면 스타일 적용이 제대로 안됨)

[속성 ^= 값] 선택자 [속성 ^= 값] 선택자 특정 값으로 시작하는 속성에 스타일 적용하기 기본형 - [속성 ^= 값]지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용합니다. 외국어 서비스 : 영어 일본어 중국어

[속성 |= 값] 선택자 [속성 |= 값] 선택자 특정 값이 포함된 속성에 스타일 적용하기 기본형 - [속성 |= 값]속성 값이 지정한 값이거나 "값-"으로 시작하면 스타일을 적용합니다.하이픈(-)으로 연결한 단어가 있더라도 스타일을 적용합니다. a[title |="us"] { padding: 5px 25px; }

[속성 ~= 값] 선택자 [속성 ~= 값] 선택자 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기 기본형 - [속성 ~= 값] [class ~="button"] { border: 2px solid black; box-shadow: rgba(0,0,0,0.4) 5px 5px; }

[속성] 선택자 [속성] 선택자 지정한 속성에 스타일 적용하기 기본형 - [속성] a[href] { background: yellow; }

sibling selector 형제 선택자 형제 요소에 스타일 적용하기 기본형 - 요소 1 ~ 요소 2모든 형제 요소에 적용 (요소 1 다음에 오는 모든 형제) h1 ~ p { text-decoration: underline; } 출처 : Doit! html5+css3 웹표준의 정석

descendant selector 하위 선택자(descendant selector) 지정한 모든 하위 요소에 스타일 적용하기 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용됩니다.기본형 - 상위요소 하위요소 section p { color: blue; }

태그 태그 외부 문서 삽입하기 웹 문서 안에 다른 웹 문서를 가져와 표시하는 것 (= inline frame) 속성 설명 width 인라인 프레임의 너비 height 인라인 프레임의 높이 name 인라인 프레임의 이름 src 프레임에 표시할 문서의 주소를 지정 seamless 프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만듬 (속성 값 없이 그냥 쓰면 됨) 출처 : Doit! html5 + css3 웹표준의 정석

column-count 단의 개수 고정하고 다단 구성하기 속성 값 설명 콘텐츠가 들어갈 단의 개수를 지정합니다 auto 단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동 계산

column-width 단의 너비 고정하고 다단 구성하기 단의 너비를 고정해 놓고 화면을 분할할 수도 있고, 단의 개수를 고정해 놓고 화면을 분할 할 수 있음. 속성 값 설명 단 너비를 직접 지정합니다 auto 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동으로 계산됨

z-index 속성 한 요소 위에 다른 요소를 쌓을 수 있습니다.요소 위에 요소를 쌓을 때 쌓는 순서를 지정할 수 있음값이 작을수록 아래에 쌓이고, 값이 클수록 위에 쌓입니다. #b1 { z-index:1; } #b2 { z-index:3; } #b3 { z-index:1; } 1 2 3

position 속성 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성텍스트나 이미지를 나란히 배치할 수 있고,여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있음 속성 값 설명 static 요소를 문서희 흐름에 맞추어 배치합니다 (초기값) relative 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다. absolute 원하는 위치를 지정해 배치합니다. fixed 지정한 위치에 고정해 배치합니다. 화면에서 요소가 잘릴 수도 있음 static을 제외한 나머지 속성 값에서는 좌표를 이용해(top, bottom, left, right) 각 요소의 위치를 조절할 수 있음 static 속성 값 - 문서의 프름대로 배치하기 relative 속성 값 - 문서 흐름 따라 위치 지정하기 s..

target 속성 새 탭에서 링크 열기 속성 값 설명 _blank 링크 내용이 새 창이나 새 탭에서 열립니다. _self 링크가 있는 화면에서 열림 (기본값) _parent 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시합니다 _top 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시합니다 ex) 이지스퍼블리싱 홈페이지(새 창 또는 새 탭)

태그 태그, href 속성 링크 만들기 텍스트 속성 설명 href 링크한 문서나 사이트의 주소를 입력합니다 target 링크한 내용이 표시될 위치(현재 창 또는 새 창)을 지정합니다 download 링크한 내용을 보여 주는 것이 아니라 다운로드합니다. rel 현재 문서와 링크한 문서의 관계를 알려줍니다 hreflang 링크한 문서의 언어를 지정합니다 type 링크한 문서의 파일 유형을 알려줍니다.

transform: 변형 함수; ex).photo {transform: translate(50px, 100px)} 2차원 변형 함수translate() - 이동scale() - 확대/축소rotate(각도) - 지정한 각도만큼 왜곡합니다.skew() 지정한 각도만큼 왜곡합니다. 3차원 변형 함수// 추후에

트랜지션 진행 시간 지정하기 transition-duration: (단위 s, ms)

트랜지션을 적용할 속성 지정하기 속성 값 설명 all all 값을 사용하거나 transition-property를 생략할 경우, 요소의 모든 속성이 트랜지션 대산이 된다(기본값) none 트랜지션 동안 아무 속성도 바뀌지 않음 트랜지션 효과를 적용할 속성 이름을 지정. ex) background-color, width transition-property: all; // 해당 요소의 모든 속성에 트랜지션 적용transition-property: background-color; // 해당 요소의 배경 색에 트랜지션 적용transition-property: width, height; // 해당 요소의 너비와 높이에 트랜지션 적용 출처 - Doit! html5+css3 웹표준의 정석

Google fonts 사이트를 이용하면 유용하다. https://fonts.google.com/

배경 이미지 위치 조절하기 background-position: ; 수평 위치 : left | center | right | | 수직 위치 : top | center | bottom | | ex)background-position: center bottom; // 배경 이미지를 브라우저 창의 중앙 하단에 배치 background-position: 0% 0%; // 배경 이미지를 넣으려는 요소의 왼쪽 모소리에 배경 이미지의 왼쪽 모서리를 맞춥니다.background-position: 30% 60%; // 배경 이미지를 넣으려는 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로, 세로가 30% 60%인 위치를 맞춥니다. background-position: 30px 20px; ..

배경 이미지 크기 조절하기 배경 이미지를 여러 크기로 조절할 수 있음 background-size: auto | contain | cover | | 속성 값 설명 auto 원래 배경이미지 크기만큼 표시(초기값) contain 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 cover 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소 너비 값과 높이 값을 지정. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 비율을 자동으로 계산해 높이 값을 지정 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고, 그 크기에 맞도록 배경 이미지를 확대하거나 축소 ex)background-size: auto;background-size: 200px 150px;background-si..

배경 이미지 반복 방법 지정하기 background-repeat : repeat | repeat-x | repeat-y | no-repeat 속성 값 설명 repeat 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복(초기값) repeat-x 창 너비와 같아질 때까지 배경 이미지를 가로로 반복 repeat-y 창 높이와 같아질 때까지 배경 이미지를 세로로 반복 no-repeat 배경 이미지를 한번만 표시하고 반복하지 않습니다. 출처 - Doit! html5+css3 웹표준의 정석

웹 요소에 배경 이미지 넣기 background-image: url(파일 경로) body {background-image: url('bg1.png');}#area {background-image: url('bg2.png');} url에 http://로 시작하는 절대 경로도 사용할 수 있음. 배경 이미지는 여러 개를 사용할 수 있는데 이럴 경우, 첫 번째 이미지부터 순서대로 표시합니다. 이미지가 채우려는 요소 크기보다 작을 경우, 해당 요소를 가득 채울 정도로 가로와 세로로 반복됩니다.

배경 적용 범위 조절하기 background-clip: border-box | padding-box | content-box 속성 값 설명 border-box 테두리(border)까지 적용(초기값) padding-box 테두리를 뺀 padding 범위까지 적용 content-box 박스 모델에서 내용 부분에만 적용

background-color: background-color:#00ff00; // 16진수: 세밀히 색상 조절background-color: rgb(0,255,0); // rgba: 필요하면 투명도도 함께 조절 가능background-color: green; // 색상 이름: 원색 사용

width: calc(100% / 12);서로 다른 단위들을 계산해 주는 메소드(함수) #{variable}을 통해 변수를 calc안에 삽입할 수 있다. ex) $size: 24px top: calc(50% - #{$size / 2})