본문 바로가기

css27

CSS의 크기단위들!(px, em, rem, vw 등) CSS의 다양한 단위들에 대해서 알아보자! 그 중에서도 주로 사용하는 것들을 정리해보았다. 우선 2종류로 나눌 수 있다. 절대 단위 고유한 크기를 갖는다. 즉, 타 요소에 영향 받지 않는다. 종류 px : 픽셀 / 컴퓨터 이미지, 디스플레이를 구성하고 있는 최소 단위 상대 단위 요소에 지정된 크기(상속된 크기값 or 기본 크기값)에 대한 상대적인 크기를 갖는다. 반응형 웹등 상황에 맞추어 변해야하는 경우 활용한다. 종류 % : 퍼센트 / 상대 비율 em : 배수 / 상속에 따라서 값이 계속 변한다. (중첩이 됨) rem : 최상위 요소에 대한 배수 / em과 다르게 절대적 기준이 있어 다른 값을 가리키지 않는다. (16px이 기본 설정이므로 아무 설정없이하면 16px적용!) em vs rem 예시 1. .. 2022. 1. 9.

CSS 가상클래스 (3)_순서 가상클래스[2] (first-child, last-child) 저번시간에 이어서 순서부여 가상클래스! 순서부여 가상클래스는html에 따로 클래스를 부여하지 않아도 원하는 요소 접근할 수 있도록 하기 위해서 사용한다. first-child 해당 선택자의 가장 첫 번째 요소 last-child 해당 선택자의 가장 마지막 요소 당연하지만 nth-child와 달리 순서를 뜻하는 숫자는 필요하지 않다. 예시 공지사항 갤러리 2022 신년인사 수강신청 방법 안내 장학금 신청기간 안내 복학 신청 안내 동계 방학 기간중 도서관 운영 안내 전체 CSS코드 .tab-inner { width: 400px; } .btn span { background-color: #ccc; display: inline-block; width: 120px; padding: 5px; font-weight:.. 2022. 1. 7.

CSS 가상클래스 (2)_순서 가상클래스[1] (nth-child, nth-of-type) 이번에는 순서를 부여하는 가상클래스를 알아보았다. nth-child nth-child는 순서를 부여하는 가상클래스이다. (가장 대표적인 순서부여 가상클래스) 사용법 선택자:nth-child(순서) (띄어쓰기는 역시 X) 예시 .box { border: 5px solid #000; width: 1000px; text-align: center; } .box div { border: 5px solid #000; margin: 10px; width: 200px; height: 200px; display: inline-block; } 위와 같이 부모요소인 'box'클래스에 4개의 자식요소가 있다. 이 4개의 요소에 순서를 부여해보면 .box div:nth-child(1) { background-color: dod.. 2022. 1. 7.

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.

이전 1 2 3 다음

티스토리툴바