목록분류 전체보기 (50)
공부하자
미디어쿼리(Media Query) : 디바이스에 상관없이 최적화 된 페이지를 제공할 수 있도록 도와주는 기술 미디어 쿼리를 선언 후 css 작성 기본문법 : @media only screen and (속성값 A) and (속성값 B) @media all : 모든 장치 @media print : 인쇄 결과물 및 출력 미리보기 화면 @media screen : 화면 @media speech : 음성 합성 장치 min 과 max : 화면의 최소값과 최대값을 정해주는 속성 min-width:375px : 화면의 최소 넓이가 375일 때, 즉 375px 이상의 화면에 적용하라 max-width:1024px : 화면의 최대 넓이가 1024px일 때, 즉 1024px 이하의 화면에 적용하라 @media screen ..
반응형 웹(Responsive Web) : 스마트 폰 발달에 따라 발달한 것으로 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지. 반응형 웹과 적응형 웹 ? 반응형 웹은 하나의 페이지를 디스플레이 종류에 따라 크기가 자동으로 최적화 적응형 웹은 디스플레이의 사이즈에 따라 웹 페이지가 존재한다. 크게 PC, 탭, 모바일로 나뉘어 제작된다. 모바일 해상도를 확인 할 수 있는 사이트 screensiz.es/iphone-xs Vendor object iPhone XS | Viewport Sizes and Pixel Densities for Popular Devices Vendor detail view type Apple iPhone 8 Plus iOS 5.5 13.9 1080 192..
1. transition : 속성의 변화에 단순한 애니메이션 적용. 단독 사용은 불가, hover, click 등 사용자 반응에 의해 이벤트가 실행될때 주는 효과 속성별로 시간을 따로 줄 수 있다. transition : property duration timing-function delay; (효과, 지속시간, 효과의 변화 유형, 지연시간) .box {width:50px;height:50px;background:#f00;transition:all 1s;} .box:hover {width:100px;height:100px;background:#ff0;margin-left:20px;} or .box {transition:width 0.5s, height 2s, background-color 1s;} www..
1. float:left / float:right 제일 기본적인 방법. block 속성의 박스를 inline 속성으로 바꿔 좌우 배치하는 방법 .container {width:100%} .aside {width:200px;height:500px;background:#f00;float:left;} .section {width:calc(100%-200px);height:500px;background:#f0f;float:right} 2. display:table / display:table-cell 부모와 자식의 구조를 table 형식으로 바꿔주는 css 로 table 태그의 단점인 모바일 기기에 호환되지 않는 점을 보완한 방법 .container {display:table;width:100%;} .conta..
요소의 넓이와 높이의 단위값 중 px는 고정값으 표현, em,%,vw,vh 는 유동적인 값이다. 유동값은 각자 기준이 되는 값이 다른데 em : 부모의 영향을 받아 유동적으로 변하는 폰트 단위 % : 부모 요소를 기준으로 부모 요소가 전체 사이즈의 90%라는 값을 갖고 있을 때 자식 요소는 부모가 가진 90%를 100%로 인식해 그 값을 기준으로 갖게 된다. vw와 vh : viewrport 를 기준으로 즉 사용자의 화면을 기준으로 값을 갖게 된다. 부모 요소가 viewport 기준 90%의 값을 갖고 있어도 자식 요소는 부모 요소의 영향을 받지 않고 viewport 기준으로 값을 갖게 된다. vw와 vh는 IE9부터 지원 webclub.tistory.com/356 CSS의 7가지 단위 - rem, vh..
인접선택자 : 바로 뒤에 있는 요소를 선택 할 수 있다. (+,~) + : A 선택자와 인접한 B 선택자만 선택 ~ : A 선택자와 함께 있는 B 선택자 모두를 선택 ex) 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 *부모 + 자식 관계에서는 인접 선택자 사용 불가
first, last, nth - child : 특정 순서에 있는 요소를 선택할 수 있다. first-child : 첫번째 요소 선택 last-child : 마지막 요소 선택 nth-child(순서) : 두번째, 세번째 등 원하는 순서의 요소 선택 first-of-type : 첫번째 요소 선택 last-of-type : 마지막 요소 선택 nth-of-type(숫자) : 두번째, 세번째 등 원하는 순서의 요소 선택 www.w3schools.com/cssref/sel_last-of-type.asp CSS :last-of-type Selector CSS :last-of-type Selector Example Specify a background color for the last element of its pa..
before 선택자 : after 선택자와 반대되는 개념. 엘리먼트의 스타일이 적용되기 전에 스타일 추가. www.w3schools.com/cssref/sel_before.asp CSS ::before Selector CSS ::before Selector Example Insert some text before the content of each element: p::before { content: "Read this: "; } Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The ::before selector inserts something before th www.w3schools.com 사용법 : 엘리먼..
after 선택자 : 다양한 선택자 중 엘리먼트에 포함된 모든 스타일이 끝났을 때 실행하겠다는 선택자 명령어. (ex. 부모 엘리먼트에 포함된 자식 엘리먼트의 css가 끝이 난 후 실행하겠다. ) www.w3schools.com/cssref/sel_after.asp CSS ::after Selector CSS ::after Selector Example Insert some text after the content of each element: p::after { content: " - Remember this"; } Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The ::after selector insert..
맥에 비주얼 스튜디오 코드&깃허브 설치 및 연동하기 비주얼 스튜디오 코드(VSCODE, 무료 에디터) : https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 깃(git) 다운로드 : https://g..