CSS 10 : transform, transition transfrom html요소의 회전, 크기 조절, 기울이기, 이동 효과 ! 해당 요소의 display 속성이 block이나 inline-block일 경우 가능함. translate(tx, ty) - 지정한 크기만큼 x축, y축으로 이동함. translate(tx, ty) - tx, ty만큼 이동. translateX(tx) - tx만큼 x축 이동 translateY(ty) - ty만큼 y축 이동 scale(sx, sy) - x축 y축으로 확대, 축소 scaleX(sx) - x축으로 확대 축소 scaleY(sy) - y축으로 확대 축소 rotate(각도) - 지정한 각도만큼 회전. +시계, -반시계 rotateX(각도) - x축 기준으로 회전. 입체..
CSS 09 : 고급 선택자 가상 클래스 선택하고자 하는 html 요소의 특별한 상태를 명시할 때 사용함. 선택자:가상클래스이름 {속성: 속성값;} :link - 아직 방문하지 않은 요소를 나타냄. href 속성을 가진 중 방문하지 않은 모든 요소를 선택함. :visited - 사용자가 방문한 적 있는 링크를 나타냄. :active - 사용자가 활성화한 요소(버튼 등)를 나타냄. :hover - 사용자의 마우스 포인터가 요소 위에 올라가 있으면 선택. :focus - 양식의 입력 칸 등 포커스를 받은 요소를 나타냄. 사용자가 클릭, 탭하거나 tab키로 선택됐을 경우 발동. :nth-child(n) - 형제 요소 사이에서 n번째 순서에 있는 요소들을 선택함. even(짝수), odd(홀수) :not(sel..
CSS 08 : background 속성 background-color 해당 HTML요소의 배경색 설정. background-image 해당 HTML 요소의 배경으로 나타날 배경 이미지를 설정. 설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타남. background-repeat 배경 이미지를 수평이나 수직 방향으로 반복되도록 설정 가능. background-repeat: repeat-x; (수평 반복) background-repeat: repeat-y; (수직 반복) background-repeat: no-repeat; (한 번만 나타나게) background-position background-repeat: no-repeat; 일 때 (반복되는 이미지가 아닐 때) 배경 이미..
CSS 07 : float, clear 속성 float 속성 html요소에 적용시키면 기본적인 흐름에서 벗어나 둥둥 떠다니듯 배치가 됨. 인접한 텍스트나 인라인 요소가 그 주위를 자연스럽게 감싸도록 배치가 되는 것을 말함. none : 기본값. 요소를 띄우지 않음. left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모 요소로부터 상속함 initial : 기본값으로 설정 clear 속성 float의 left나 right값을 취소함. clear: none; - 기본값 clear: left; - 왼쪽을 취소 clear: right; 오른쪽을 취소 clear: both; 둘다 취소 예시 팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아 팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아팥빙..
CSS 06 : 내비게이션 바(상단바) 만들기 inline-border를 활용해 웹페이지의 상단바를 만들어 보자. home about service contact feedback 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 내비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다. 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있다. 왼쪽에 동그란 점을 없애고 각 글자들의 링크를 없앤다. home about service contact feedback 글꼴 속성과 list 속성 값을 none으로 초기화하였다. style코드를 다음과 같이 수정한다. 글자를 흰색으로 바꾸고 nav태그의 배경색을 blueviolet으로, 전체 패딩과 마진 값을 0으로 초기화한..
CSS 05 : display 속성(none, block, inline, inline-block display 속성 HTML요소를 어떻게 표시할지를 결정. display: block이면 Block Level Element이며, display: inline일 경우 inline Level Element. -> 기본 4가지 값 none : 요소를 보이지 않게 설정. block : 가로 영역을 모두 채움 inline : 콘텐츠만큼 영역을 차지. 줄 바꿈 X. width, height지정 X inline-block : inline처럼 콘텐츠만큼 영역을 차지해 가로 배치 가능, block처럼 내부 속성인 width, height등과 같은 값은 변경 가능. block Display Block content conte..
CSS 04 : Box Model(content, padding, border, margin), Box Sizing Box Model CSS 속성 박스 모델은 속성을 지정하지 않으면 브라우저가 선언한 기본값으로 세팅되며, 우리는 CSS 속성으로 박스 모델 값을 변경할 수 있다. 가장 안쪽 영역부터 content, padding, border, margin이라고 한다. Content width, height : 가로, 세로 너비 지정 ex) width: 200px; 인라인 요소에는 width, height가 적용되지 않음. 인라인 요소는 콘텐츠만큼의 영역을 갖기 때문 display: inline-block으로 가로 세로 너비를 변경 가능함. span { border: 1px solid red; width:..
CSS 03 : 글꼴 속성 정리 MDN (예시) 글꼴 종류 지정 font-family: serif, monospace; => serif라는 글꼴을 적용하고 만약 안되면 monospace 글꼴을 적용함.(하나만 써도 됨) 글자 크기 font-size: 16px; 이텔릭체 여부 지정 font-style: italic; 글자 굵기 지정 font-weight: bold; 소문자를 작은 대문자로 바꿈 font-variant: small-caps; 단위 px : 픽셀 단위 rem : 루트 요소의 글꼴 크기(html). ex) 2rem은 html글꼴 크기의 2배 em : 요소의 글꼴 크기. 현재 자기 자신 폰트 사이즈의 몇배로 할것인가? vw : viewport 너비의 1% viewport는 현재 보이는 화면 사이 ..
CSS 02 : 선택자 정리 전체선택자 에스트릭 : 모든 요소를 선택할 때 쓰는 전체 선택자. 브라우저의 기본 속성을 초기화 할 때 사용함. h2 태그를 사용하는 모든 곳에 공통적으로 속성을 부여함. class 선택자 : 특정 class값에만 공통적으로 속성을 부여함. 동해물과 백두산이 마르고 닳도록 id 선택자 : id 선택자는 웹문서에서 중복되지 않는 단 하나의 요소만을 선택할 수 있어야 함. 굿 아이디어! 속성 선택자 : 주어진 속성을 가진 모든 요소 검색함. a[href] { color: purple; } /* 태그에 href속성이 존재하는 모든 요소들에 대해 적용함.*/ a[href='https://example.org'] { color: green; } /* 태그에 href속성이 "https:..
CSS 01 : 인라인, 내부, 외부 스타일 적용 방법 1. CSS의 구조 h1 { color: blue; } h1: 선택자 color: 속성명 blue: 속성 =>어떠한 요소를 선택해서 어떠한 스타일 규칙을 적용하겠다. 2. CSS 적용 방법 인라인 스타일 내부 스타일 외부 스타일 인라인 스타일 스타일을 꾸미고 싶은 요소에 CSS를 적용한다. 제목 인라인은 직접적으로 태그에 스타일을 적용하는 방법이다. 여러 속성을 적용할 때는 ;으로 구분한다. 현업에서는 잘 사용하지 않는다고 한다. 내부 스타일 헬스 오늘도 헬스장에서 운동을 합니다. head 태그 내의 style태그에서 특정 id나 class의 통일된 속성을 적용시키는 방법. A.html에 있는 style을 B.html에서 사용하려면 B.html에다가..
