CSS (4) 썸네일형 리스트형 [CSS 스타일 속성 3] 선택자 selector [인라인/내장/인접/일반/상태/구조/문자] 선택자 (selector) hi { color : red; } 선택자안에 컬러라는 스타일 속성을 사용해 레드라는 스타일 값을 사용하겠다 인라인(in-line) 방식 HTML 요소(태그)의 style 속성에 직접 작성하는 방식 내장(embedded) 방식 HTML 안에 작성하는 방식 head태그 사이에 넣어주는게 작업하는데에 더 용이하다 (더 나아가 파일로 사용하는 것이 더 유용) 셀렉터 중 * 의 역할 body안에 있는 모든 태그에 적용이 됨 인접 형제 선택자 + E의 다음 형제 요소 F 하나만 선택 일반 형제 선택자 ~ E의 다음 형제 요소 F 모두 선택 반응 선택자 특정한 상대를 선택하는 선택자 상태 선택자 input:focus focus가 된 input 태그를 선택 input:focus focus가.. [CSS 스타일 속성 3] 위치 속성 position z-index 위치 속성 position § 태그의 위치 설정 방법을 변경할 때 사용한다. § 즉, 레이아웃을 배치하거나, 객체를 위치시킬떄 사용한다. position 속성의 종류 ☘️ static : 정적의 고정 위치. 기본 설정값 / 위에서 아래로 순서대로 배치됨 ☘️ relative : 상대적 기준 위치. 부모의 위치를 기준으로 위치를 잡는다 / 초기 위치 상태에서 상하좌우로 위치를 이동함 ☘️ absolute : 절대적 기준 위치 ☘️ fixed : 고정 위치. 화면을 기준으로 특정 좌표에 고정되어 표현 ☘️ sticky : 처음엔 static 속성과 같이 동작하다가 스크롤시 지정 지점에서 fixed 처럼 고정됨 sticky 엘리먼트는 어느 위치에 고정시키기 위해 속성 중 하나는 반드시 필요하다. 원하는 위치에.. [CSS 스타일속성 2] background/ border/ 폰트 background- 배경 크기단위를 두개 입력하면 두 번째 크기 단위는 높이를 의미한다 (가로,세로) 100% 200% (단 , 콤마없이 사용) 이미지 중첩해서 사용도 가능 background-size : n% , n%; background-repeat : 배경 패턴 방식을 지정 background-attachment : 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 속성 background-position : 배경 위치 지정하는 속성 border- 테두리 border-width : 테두리의 너비 border-style : 테두리의 형태 border-color : border-radius : 테두리의 라운딩 (둥글게) 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 의 순서 폰트 속성 § 사용자의 컴.. [CSS 스타일 속성 1] CSS 단위와 가시속성 CSS는 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어이다. HTML로 뼈대를 만들어주었다면! CSS로 예쁘게 디자인적인 요소를 추가해보자 본인은 HTML에 안에 을 만들어 CSS 속성들을 추가해주었다 😊 CSS의 문법은 선택자와 선언부로 구성된다. 선택자인 Selector은 HTML요소에서 CSS를 적용하고자 하는 엘리먼트이다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분해 포함하고 중괄호{} 를 사용해 전체를 둘러싸야한다. CSS의 단위 크기 CSS3에서 사용하는 크기 단위는 %(백분률), em(배수), cm, mm, inch, px이다. 기본은 px %의 기본값은 100% 이다 색상 HEX 코드 단위 : #000000 RGB 색상 단.. 이전 1 다음
