본문 바로가기

🌌 | WEB DEV/HTML CSS24

CSS 가상클래스 (1)-2_마우스 오버 효과(hover, transition) 추가! hover와 transition을 가지고 놀다가 transition에 width와 height의 속도를 다르게 적용할 수 있는 것을 발견했다. .parent { width: 400px; height: 200px; position: relative; } .child { position: absolute; width: 25px; height: 25px; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: blueviolet; transition: width 0.95s, height 1s; } .child:hover { width: 100%; height: 100%; background-color: rgb(216, 179, 250);.. 2022. 1. 7.

CSS 가상클래스 (1)_마우스 오버 효과(hover, transition) 마우스가 올라갔을 때 변화를 주는 가상클래스에 대해서 알아보자 hover a태그로 hover를 활용해보았다. 들어가기전에 a태그 관련 알아둘 것 1. href 속성을 비워두면 jQuery가 작동하지 않는다. -> #none을 넣어주자! 2. body의 색상 속성을 적용받지 않는다. 사용법 선택자:hover 위처럼 선택자 뒤에 가상클래스를 적어주면 되는데 선택자와 가상클래스 사이에 띄어쓰기가 있으면 안된다! 예시1 공지사항 Q&A 커뮤니티 body { background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; font-weight: 700; transition: 0.3s; } a:hover { .. 2022. 1. 7.

CSS 포지션 (3)_원하는 위치에 딱 배치하기! 저번에 다뤘던 것에 이어서 포지션에 대해서 더 알아보았다. 간단하게 복습하면 HTML요소의 좌표 기준은 항상 왼쪽 상단의 꼭지점이 기준이다. 그래서 top, bottom, left, right에 값을 넣어 주면 그 기준이 해당 값에 배치가 된다. (top: 50%, left: 50% - 왼쪽 상단 꼭지점이 그 좌표에 배치) 포지션을 정해줄 때 값을 px 등의 절대적인 값과 %등의 상대적인 값을 넣어 줄 수 있는데 이는 역시 입맛에 맞춰서 넣어주면 된다. 예를 들어서 '나는 이것을 부모요소의 정 가운데에 항상 위치시키겠어!' 라는 의도로 값을 넣는다면, 부모요소의 크기에 따라서 해당 요소가 바뀌면 안된다. 이러한 경우 % 와 같은 상대적인 값을 사용하면 어떤 상황에도 의도한 위치에 배치를 할 수 있을 것이.. 2022. 1. 6.

CSS 포지션 (2)_자동으로 정가운데 배치? 저번에 다루었던 position 속성을 이어서 이야기 해보자! 간단히 복습해보면 부모요소에 position: relative, 자식요소에 position: absolute를 적용해주어야 한다. 또한 추가적으로 html상으로도 부모-자식 관계이어야만 position이 적용이 된다! 그 이후에 top, bottom, left, right를 이용해 상 하 좌 우에 배치를 할 수 있다. 각각의 기준점은 다음과 같다! px, % 등으로 값을 넣어주어도 된다. .parent { position: relative; width: 500px; height: 500px; border: 1px solid #000; } .child { position: absolute; background-color: steelblue; w.. 2022. 1. 6.

CSS 포지션 (1)_부모요소 자식요소 position 속성 : static, fixed, relative, absolute 그 중에서 이번에 다룰 내용은 아래의 두가지이다. relative -> 부모요소에! absolute -> 자식요소에! 예시 .parent { background-color: blueviolet; width: 600px; height: 400px; position: relative; } .child { background-color: rgb(140, 132, 190); width: 200px; height: 100px; position: absolute; } position속성을 부모요소에 relative, 자식요소에 absolute로 지정해주었다. 이렇게만 해놓으면 아무 변화가 없다. 좌표를 지정해주어야 한다! 좌표값은.. 2022. 1. 5.

HTML 시멘틱 태그 (레이아웃 설계) semantic : 의미론적인, 의미를 가지고 있는 HTML5 이전에 레이아웃을 구성할 때 div에 클래스를 부여하며 구성하였다. 이는 html파일이 길어지고 div를 계속 반복해서 사용해야한다. 그 이후 sementic태그의 등장으로 효율적이고 직관적으로 구성할 수 있게되었다! 종류 .container : 가장 상위 section : 주제별 컨텐츠 영역 header : 헤더 영역(로고, 메뉴 등) footer : 푸터(제작 정보 등) aricle : 컨텐츠 내용 nav : 문서 링크 탐색 main : 문서 주요 내용 지정 단계 .container>section, header, footer>article>div 레이아웃 만들어보기(가상클래스 X) .container { border: 1px solid #.. 2022. 1. 5.

CSS 기본 (6)_포지셔닝(float, overflow, clear) float 부모 요소 기준, 왼쪽 or 오른쪽 배치 지정 margin : auto : 가운데로! (※주의 : block요소만 적용가능!) 예시 .parent { border: 5px solid red; width: 600px; /*자식요소에 height값 지정해주면 자동으로 늘어나기 때문에 높이 따로 지정X*/ } .child { background-color: gold; width: 200px; height: 200px; } float 속성을 따로 주지 않은 상태이다. 왼쪽으로 배치 되어있는 것을 보고 "기본값이 float: left 인가?" 라고 생각할 수 있지만 아니다! float 속성을 준 경우 .parent { border: 5px solid red; width: 600px; /*자식요소에 he.. 2022. 1. 5.

HTML 인라인 요소, 블록요소, 인라인블록 인라인(inline) 요소 - 한줄에 여러개 배치 - 기본 너비값 = 컨텐츠 width값 - 크기값을 가질 수 없음 - 상-하 margin X (좌우 O) (text서식) 블록(block) 요소 - 한줄에 only One - 기본 너비값 = 100% - 크기값 O - 상하좌우 margin O (레이아웃) 인라인 블록(inline-block) 요소 - 한줄에 여러개 - 기본 너비값 = 컨텐츠 width값 - 크기값 O - 상하좌우 margin O 인라인 블록 인라인-블록 span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map, cite, abbr, time div, p, table, blockquote,.. 2022. 1. 5.

CSS 기본 (5)_박스(padding, margin, box-sizing, box-shadow, test-shadow) 박스모델의 구조 사이즈 : width, height 간격 : margin(border 밖), padding(content와 border사이) margin, padding 속성 크기 지정 1. 한 개의 숫자 : 상 우 하 좌 모두 동일 2. 두 개의 숫자 : 상-하 / 좌-우 3. 네 개의 숫자 : 상 우 하 좌 (순서대로) box-sizing 1. box-sizing 설정X .box1 { width: 100px; height: 100px; border: 10px solid red; margin: 20px; } .box2 { width: 100px; height: 100px; border: 10px solid red; padding: 10px; margin: 20px; } 위의 그림처럼 padding값을 .. 2022. 1. 2.

이전 1 2 3 다음

티스토리툴바