본문 바로가기

728x90
반응형

웹언어/CSS3

(38)
[CSS3강좌] 6강 리스트(ol, ul)관련 속성 ** 영상으로 보고 싶은 분은 아래주소를 클릭하세요. https://www.youtube.com/watch?v=j-TLmxPziLM 1. 속성정리 속성명 설명 list-style (기호나 번호를 바꾸는 속성) ul disc 검은원 circle 빈원 square 사각형 none 없앰 ol decimal 숫자(기본값) decimal-leading-zero 10미만의 숫자앞에 0을 붙임 upper-roman 대문자 로마자 표시 lower-roman 소문자 로마자 표시 upper-alpha 대문자 알파벳 표시 lower-alpha 소문자 알파벳 표시 none 번호 없앰 list-style-image url(경로); ul{ list-style-image: url(ddd.png); } 2. ul의 기호변경 1) 코..
[CSS3강좌] 5강 FONT(글자관련속성) ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=6u1bYDdJmHM 1. 속성정리 속성명 설명 font-family (글꼴 지정속성) serif 명조체 계열 sans-serif 고딕체 계열 font-size 글자 크기 지정 속성 - 사용단위: px, %, em 등, 키워드 : 영문크기 font-weight (글자 굵기 지정 속성) normal 원래 굵게 나오는 글자를 기본상태 bold 글자를 굵게 지정 숫자지정 100~900사이의 숫자 지정(높을수록 굵음) font-style (글자 기울기 지정 속성) normal 기울어져 나오는 글자를 기본상태 italic 글자를 기울게 지정 font-variant (소문자→작은대문자) normal 소문자를..
[CSS3강좌] 4강 TEXT(글자관련속성) ** 영상으로 보고 싶은 분은 아래를 클릭해주세요. https://www.youtube.com/watch?v=L7zdQ6uV3fY 1. 글자관련 속성 정리 속성명 설명 color (글자색 지정 속성) 키워드 h1{ color: red; } =>영문 rgb방식 h1{ color: rgb(100,100,100); } hsl방식 h1{ color: hsl(50,20%,50%); } hex코드 h1{ color: #000000; } rgba방식 h1{ color: rgba(100,100,100,0.5); hsl방식 h1{ color: hsla(50,20%,50%,0.5); } text-align (문단 가로 정렬) left 글자를 왼쪽에 지정 right 글자를 오른쪽에 지정 center 글자를 가운데 지정 ju..
[CSS3강좌] 3강 CSS색상넣기(컬러값처리) 1. CSS색상(컬러)값의 종류 구분 정리 CSS2 키워드 영문으로 컬러값 작성 ex) color: red; rgb 레드그린블루수치작성 ex) color: rgb(20,20,20); hsl 색상,채도,명도수치작성 ex) color: hsl(70,70%,70%); hex rgb를 16진법코드 변환 ex) color: #333333; CSS3 rgba rgb방식에 alpha(투명도)추가 ex) color: rgba(20,20,20,0.5); hsla hsl방식에 alpha(투명도)추가 ex) color: hsla(70,70%,70%,0.5); 2. 컬러값을 적용 시킬 수 있는 CSS속성명 속성명 정리 코드예시 color 글자색 지정 속성 h1{ color: red; } background-color 배경색 ..
[CSS3강좌] 2강 CSS기본선택자 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=ZkqK4a7i3SI&t=165s - 선택자 : CSS가 특정 요소를 선택해서 스타일을 변경하기 위해 사용 1. 기본 선택자의 종류 선택자 설명 예시 * 모든 태그를 선택 *{ color: red; } 태그명 해당 태그를 선택 h1{ color: red; } 아이디 태그 속성인 아이디속성의 값을 선택 #text01{ color: red; } 클래스 태그 속성인 클래스속성의 값을 선택 .text01{ color: red; } 2. 전체선택자 - 모든 태그를 선택 1) 코드뷰 제목태그 문단태그 리스트태그 리스트태그 리스트태그 리스트태그 2) 전체선택자로 스타일을 쓰기 전 미리보기 3) 전체선택자..
[CSS3강좌] 1강 CSS문법과 스타일시트 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=ZkqK4a7i3SI&t=165s - CSS : 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트 1. CSS문법 문법 예시 선택자{ 속성명: 속성값; } h1{ color: red; } 2. 스타일시트의 종류 종류 설명 내부 스타일시트 제목태그 문단태그 리스트태그 리스트태그 리스트태그 리스트태그 2) 코드 완성뷰 4. 외부스타일시트 - CSS문서를 따로 만들어서 HTML문서에 연결해서 사용하는 방식 - 보통 프로젝트에서 대부분 이방법을 사용한다. 1) HTML코드 뷰 제목태그 문단태그 리스트태그 리스트태그 리스트태그 리스트태그 2) 외부 CSS에 스타일언어 작성 3) 코드 완성뷰 5...

728x90
반응형