가상 선택자의 종류 -동적 가상 클래스 -구조적 가상 클래스 1.동적가상클래스 ;사용자가 특정 액션을 발생시키기 위해, 태그의 상태에 따라 css에서 디자인을 넣을 수 있다. :acitve 가상 선택자를 사용할 때는 : (콜론)을 붘여서 사용한다. ----193p 마우스로 태그를 누르고있는 동안 보이는 디자인css을 넣어줄 수 있다. 주로, 누르는 버튼과 관련된 a와 button와 같이 동반사용된다. ex) button:active{ color: lime; } 클릭 :visited 직전에 방문한 링크를 표시 ----194p * action과 함께 동반사용시 visited는 action 위에다가 작성해야함* a:visited { color: purple; } a:active { color: black; }..

192p 가상선택자 (예제파일 챕터11) 1) 동적가상클래스 2)구조적 가상클래스 1) 동적 가상 클래스 ㄱ. active : 클릭시 어떤 기능들이 활성화되는 가상 클래스 -----------------예제파일 1 클릭 button:active 사용시 클릭 body 에 추가로 클릭 그리고 위에 style에 (항상 a:style 등 붙여서 적어야한다) a:active { color: black; } 입력시 링크는 #(없음)으로 했기 때문에, 클릭해도 이동은 안된다. 클릭시 black 으로 변환됨 body 에 추가 클릭 p:active { color: red; } style 추가 시 클릭 클릭 클릭 ㄴ. visited ★ 이미 방문한 링크표시 (ex 링크 누르면 보라색으로 표시되는거) ---- A 태그한테만..

2023.11.28 총정리 1. 만들고 싶은 사이트 모양 구성하기 2. 사이트를 브록단위로 구분하기 (header, section, footer 등) 3. 안에 들어갈 태그 예상해보기(코드 짜면서 수정되는 부분도 있다.) >>앞으로 사이트 완성할 때 까지 가이드 라인이 됨(html과 css배치에 대해서) 4. 코드를 작성하는 순서 1. HTML 내용부터 작성 내용이 없어도 나중에 글이 들어갈 부분은 아무말이나 적어서 작성 (why? 미리 글이 들어갈 위치를 정해두면 css하기 편하다.) 2. CSS 내용 작성 위와 같은 순서로 작성했을 때, 좀 더 css(디자인)에 집중할 수 있다. * HTML 작성할 때 주의할 점 * 1. 크게 분류해서 태그작성(header, section 등) 2.한 영역(ex he..

text-shadow: black 1px 0 10px; 1px 그림자크기 0 번짐정도 10px 그림자 채도 수준 .section1 { display: flex; align-items: center; flex-direction: column; background-image: url(pink.jpg) ; background-size: cover; flex-direction: column; justify-content: center; .section1 { display: flex; align-items: start; /*aline 과 direction이 반대가 되는상황*/ flex-direction: column; /*세로정렬*/ justify-content: center; background-image: u..

복습 플렉스를 이용한 정렬과 플렉의 속성 158p display: flex; justify content: center; 가로정렬 aligh items: center; 상위영역의 높이 값이 있다면 세로정렬 html body { heigh: 100%; } 이 값을 맨 위로 (상위 영역이 높이값을 의미한다) 168p 플렉스방향은 잘 안바꿔서 이런 내용만 있다는것만 이해하기 174p static 177p -> div { postion: static; } 기본값이다. fixed 179p -> div {position: fixed; } 화면위에 고정되서 움직이지 않음 relative 180p ->div {postion: retative; top: 20px } 기본위치(static)를 기본으로 상대적으로 이동한다...

input 태그 : 이미지 아이디를입력해보자 password 우리끼리 정의하는 명칭 input 태그는 입력을 받는 폼을 의미하는데, 사용자가 데이터를 입력하는 영역을 결정. 의미한다. 그런데 input type에도 그 유형들이 다른데, 날짜 당신의 성별은 무엇인가요? 여성 남성 text : 텍스트입력칸 checkbox : 체크박스 password : 비밀번호 date : 날짜 등이 있다. ----------------------------------------------- value