본문 바로가기

728x90

css6

[CSS] 다중 클래스 접근 및 Font-weight : Bold 설정 ※ 디자인 변경 작업 수행 중 필요한 내용 정리 ※1. 다중 클래스.a, .b, .c{}쉼표를 사용한 연결각각의 항목을 or로 적용나열한 모든 클래스 혹은 id, 태그에 적용되고, 각 클래스는 따로 사용.a .b .c{}공백을 사용한 연결뒤에나온 선택자가 하위 개체로 지정즉, A요소 내부의 B요소 내부에 있는 C요소에만 적용.a.b.c{}공백없이 연결class="a b c"처럼 모든 속성을 한번에 만족하는 요소에만 적용[참고]https://padahkim.tistory.com/34 CSS 다중선택자와 클래스이름여러개1. 여러 요소를 동시에 선택하여 적용. .a, .b, .c{} 이런 식으로 쉼표가 있을 때는 각각의 항목을 or로 적용한다. 즉 나열한 모든 클래스 혹은 id, 태그에 적용되고, 각 클래스는.. 2024. 5. 16.

[CSS] 글자 관련 CSS 정리 폰트 : 구글 웹 폰트(https://soo-note.tistory.com/3) 정리 1. 글자색 태그 { color: 원하는 색상; } 2. 굵기 태그 { font-weight: 속성; } 속성 의미 normal 보통 = 400 bold 굵은 굵기 = 700 lighter 상속된 값보다 얇은 굵기 bolder 상속된 값보다 굵은 굵기 number 100, 200, 300, 400, 500, 600, 700, 800, 900 initial 기본값으로 설정 inherit 부모 요소의 값을 상속 3. 기울임 태그 { font-style: 속성; } 속성 의미 normal 보통 italic 기울임꼴(흘려쓴 서체) oblique 기울임꼴(글자를 기울인 것) initial 기본값 inherit 부모 요소의 값을 .. 2023. 2. 16.

[CSS] 여백(margin/padding) 기본 개념 정리 참고 사이트 : https://ofcourse.kr/css-course/margin-padding-속성 CSS margin,padding 속성 - ofcourse 개요 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. margin과 padding는 border 을 경계로 나뉩니다. 방향 방향 ofcourse.kr 1. Margin 테두리(border)와 이웃하는 요소 사이의 간격. 즉, 바깥쪽 여백 속성 설명 margin-top: 10px 위쪽의 바깥 여백 margin-right: 10px 오른쪽의 바깥 여백 margin-bottom: 10px 아래쪽의 바깥 여백 margin-left: 10px.. 2023. 2. 12.

[CSS] CSS 선택자(Selector) 정리 ※ 후에 알아보기 편하기 위해 정리해둔 것입니다.※ 참고 사이트 : https://openwiki.kr/tech/css_selector CSS 선택자(Selector) - 기술 - 오픈위키 CSS 선택자(Selector) 선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다. 패턴뜻 #idid로 지정된 요소 선택 .classclass로 지정된 요소 openwiki.kr 패턴 뜻 * 모든 요소 선택 tag , 등 특정 태그를 선택 .class 클래스로 지정된 요소 선택 (클래스 이름 앞에 점을 찍는다.) #id 아이디로 지정된 요소 선택 (아이디 이름 앞에 # 입력) E>F E 요소의 자식인 F 요.. 2023. 2. 12.

[CSS] 구글 웹 폰트 사용해보기 ※ mac 사용, safari 사용 1. 구글 웹 폰트 링크 : https://fonts.google.com/?subset=korean&noto.script=Kore Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 폰트 선택 후 Select Regular 400 클릭 3. (-) 아이콘 확인 후 우측 상단 아이콘 클릭 4. link 태그(빨간색 상자)는 안녕하세요! 2023. 2. 7.

[CSS] 배경(background) 관련 기본 CSS 사용해보기 1. background-color : 배경에 색 넣기 tag { background-color: 원하는 색상; } test https://namu.wiki/w/헥스%20코드 색상 코드 참고 헥스 코드 - 나무위키 이 문서에 수록된 색상과 헥스 코드보다 더 많은 정보를 얻고자 한다면 다음 링크에서 확인이 가능하다. CSS Color Module Level 3 명세를 참고해도 된다. CSS 색상명은 대소문자를 구분하지 않지만 Pasca namu.wiki 2. background-image : 배경에 이미지 넣기 tag{ background-image: url('이미지의 경로'); } test 이때 배경의 이미지는 현재 배경의 크기보다 커서 왼쪽 위에서 부터 정해진 크키만큼만 보여지고 있다. 그래서 이미지를.. 2023. 2. 6.

이전 1 다음

728x90

티스토리툴바