[CSS] 미디어 쿼리(Media Query) - 반응형 개발, 가상 요소

1. 미디어 쿼리(Media Query) - 반응형 개발 : 접속하고 있는 기기들마다 다르게 반응하여 표현되도록 개발하는 것 - 웹 페이지에 접속하고 있는 기기마다 원하는 형태로 스타일을 조정할 수 있는 기술 - 기기의 화면 너비, 높이 등으로 판단 - 장점 : 업데이트, 유지관리, 디버깅이 쉬워지며 업데이트 비용이 감소 - 단점 : 구현이 어렵고, 브라우저가 서버에서 다운로드하는 속도(코드)가 느려짐 (사용자에게 보여주는 화면의 로딩이 느려진다.) - 위에서부터 내려오면서 하나하나 적용시키면서 지나가는 것 2. 문법 @media screen and (조건문) { 스타일 적용 } ① @media : 미디어 쿼리가 시작됨을 표시 ② screen : 미디어 쿼리의 적용 기기 / all : 모든 기기 ③ an..

[CSS] CSS position, z-index

- CSS 요소들의 위치를 결정하는 방식을 설정 1. 정적(static)위치 지정방식 - 기본값으로 HTML 요소의 위치를 결정하는 기본적인 방식 - top, left, right, bottom 속성값을 사용할 수 없음 - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식 2. 상대(relative)위치 지정방식 - HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식 - 기본 위치는 정적위치 지정방식일 때 결정되는 위치를 의미함 - 설정한 위치로부터 출발해 반대쪽으로 가는 px값을 설정 ex) left: 100px; - 왼쪽에서부터 오른쪽으로 100px만큼 감 top: -70px; - 위쪽에서부터 아래로 -70px만큼 감 z-index - position 속성과 함께 쓰이며..

[CSS] CSS display, box-sizing, border(radius)

1. CSS display block - 한 줄을 차지 - width, height, padding, margin 지정 가능 inline - 요소를 가로로 나열 - width, height, padding, margin 지정 불가능 - line-height : 글자 한 줄의 높이 inline-block - 위에 있는 모든 성질들을 다 적용받는 요소 - inline처럼 가로로 나열되면서 width, height, padding, margin 지정 가능해짐 none - 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐 2. box-sizing - 위에 예시처럼 두 개의 width나 height를 똑같이 만들어주기 위해서는 border 크기나 padding, margin 크기를 계산해서 width나..

[CSS] background(배경)

1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) - HTML 요소의 배경으로 나타날 배경 이미지를 설정 https://unsplash.com/ Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash...

[CSS] font(폰트)

- 과거 HTML 내용 1. 글꼴(font-family) - font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러개의 글꼴을 같이 설정할 수도 있음 - font-family 속성값이 여러개의 글꼴로 설정되어 있다면, 첫번째 글꼴부터 찾은 후 없으면 그 다음 글꼴을 적용시킴 font-family: "폰트명","폰트명",... 2. 굵기(font-family) - 텍스트의 굵기를 조절할 수 있으며, 숫자가 올라갈수록 굵어짐 100~900 / normal(400), bold(700) font-weight:숫자값 혹은 bold/normal; 3. 크기(font-size) - font의 기본 크기는 16px 절대적 크기 - 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용 - 절대적 크기..

[CSS] CSS 적용하는 방법, 우선순위 및 상속

1. CSS 적용하는 방법 인라인 스타일 - 요소의 style 속성의 값 안에 CSS 문법으로 스타일을 적용하는 방법 ex) "나 선택자를 두개 써서 사용하게 되면 각 점수가 더해져서 우선순위가 정해진다. - 그래서 "ul>li>.li-class"를 보면 태그 선택자 2개 클래서 1개이기에 총 12점으로 점수가 정해진다. 상속 - CSS 속성은 상속되는 속성과 상속되지 않는 속성이 있음 - 상속되는 속성은 포하마고 있는 자식 요소에 영향을 미치며 상속되지 않는 속성은 영향을 미치지 않음 https://www.w3.org/TR/CSS22/propidx.html Full property table 'cursor' [ [ ,]* [ auto | crosshair | default | pointer | move..

[CSS] CSS와 CSS 선택자

1. CSS(Cascading Style Sheets) CSS란? - CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어 - 스타일을 HTML 문서로부터 따로 분리하는 것이 가능 CSS를 사용하는 이유 - HTML만으로 웹 페이지를 제작할 경우 HTML 요소 세부 스타일을 하나하나 따로 지정해 주어야 하기 때문에 매우 많은 시간이 걸리며, 완성된 후에도 스타일의 변경 및 유지보수가 매우 힘들어짐 - 이 문제를 해결하기 위해 지정된 스타일 시트 언어가 바로 CSS이고, 웹 페이지의 스타일을 별도 파일로 저장할 수 있게 해주므로 사이트의 스타일을 손 쉽게 제어할 수 있음 2. CSS 문법 선택자 { 속성명: 속성값; 속성명: 속성값; ... } CSS는 선택자와..