WEB/CSS
[CSS] 텍스트 그림자, 상자 그림자 : text/box-shadow
🔻그림자🔻 1. text-shadow: x y blur color 2. box-shadow: x y blur color x, y 태양과의 거리라고 생각하면된다. 값이 클 수록 그림자와의 거리가 멀어진다. 상자1 상자2 상자3 개발자 도구를 열어 조정가능하다
분류 전체보기
WEB/CSS
[CSS] display, float 사용하여 여백 지우기
🔻여백 지우기🔻 콘텐츠 상자1 상자2 상자3 또 다른 내용 1. display와 font-size 사용 2. float 활용
WEB/CSS
[CSS] 요소의 앞/뒤에 추가 내용 생성 : 전후선택자
🔻CSS 선택자🔻 1. 가상 클래스 요소의 특정 상태나 동작을 선택하는데 사용한다. 가상클래스는 한 개의 콜론(:)으로 시작하여, 그 뒤에 가상클래스의 이름이 온다. https://steady-record.tistory.com/entry/CSS-%EA%B0%80%EC%83%81%ED%81%B4%EB%9E%98%EC%8A%A4 [CSS] 요소 선택 : 가상클래스 요소들을 선택하는 데 사용되는 가상 클래스들이다. 1. :first-child 해당 요소가 부모 요소의 첫 번째 자식 요소인 경우에 스타일을 적용한다. 2. :last-child 해당 요소가 부모 요소의 마지막 자식 요 steady-record.tistory.com 2. 가상요소 선택자에 추가되어 특정한 상태나 위치의 요소를 선택할 때 사용된다. ..
WEB/CSS
[CSS] 특정한 속성을 가진 요소들을 선택 : 속성 선택자
🔻속성 선택자🔻 특정한 속성을 가진 요소들을 선택하기 위해 사용된다. 1. 선택자[속성명] 2. 선택자[속성명=값] 3. 선택자[속성명^=값] 4. 선택자[속성명$=값] 5. 선택자[속성명*=값] [공통 HTML] 네이버 예스24 다음 11번가 쿠팡 1. 선택자[속성명] target 속성 설정된 요소만 스타일 적용된다. 2. 선택자[속성명=값] target= "_blank"인 요소만 스타일 적용된다. 3. 선택자[속성명^=값] href가 http://로 시작하는 요소만 스타일 적용된다. 4. 선택자[속성명$=값] href가 .com으로 끝나는 요소만 스타일 적용된다. 5. 선택자[속성명*=값] href에서 co가 들어간 요소만 스타일 적용된다. 🔻디자인에 적용하기🔻 1. 필수 입력 필드 강조하기 2. 입..
WEB/CSS
[CSS] 요소 선택 : 가상클래스
요소들을 선택하는 데 사용되는 가상 클래스들이다. 1. :first-child 해당 요소가 부모 요소의 첫 번째 자식 요소인 경우에 스타일을 적용한다. 2. :last-child 해당 요소가 부모 요소의 마지막 자식 요소인 경우에 스타일을 적용한다. 3. nth-child(n) 해당 요소가 부모 요소의 n번째 자식 요소인 경우에 스타일을 적용한다. n은 양의 정수이며, 1부터 시작한다. n에 수열이 적용 가능하다. 4. :nth-last-child(n) 해당 요소가 부모 요소의 뒤에서부터 n번째 자식 요소인 경우에 스타일을 적용한다. n은 양의 정수이며, 1부터 시작한다. n에 수열이 적용 가능하다. n으로 사용할 수 있는 항목 1. 숫자 : index(위치) 2. 수열 : 2n, 3n, ,, 2n+13..
WEB/CSS
[CSS] 태그의 수평 정렬
🔻태그의 수평 정렬🔻 인라인 태그와 블럭 태그의 방법이 상이하다. 1. 내용물의 정렬 text-align 인라인 태그는 좌우 여백이 없어서 적용이 불가능하다. 블럭 태그 전용이다. 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 2. 태그 자체의 위치를 정렬 인라인 태그 부모님 블럭 태그 도움을 받는다.(ex. ) 블럭 태그 좌우 여백 공간이 없어서불가능하다. 마진을 조절하여 정렬한다. 인라인 태그 조절 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 블럭태그 조절
WEB/CSS
[CSS] 요소의 위치 : position, z-index
🔻position🔻 1. padding : 부모가 자식의 위치를 지정한다. 2. margin : 스스로 위치 지정한다. 3. position : CSS1 ~ CSS3에서 자주 사용 4. transform : CSS4에서 자주 사용 좌표값을 사용하여 위치를 지정한다. x(left), y(top) 좌표를 지정하는 방식이 여러개이며, 원점(기준점)이 다양하다. 🔻속성🔻 1. static position: static 요소의 기본값이며, 일반적인 문서 흐름에 따라 배치된다. x,y 사용 불가능하다. FlowLayout 2. absolute position: absolute 절대 좌표 top, bottom, left, right 등의 속성을 사용하여 요소의 위치를 조정할 수 있다. 문서의 좌측 상단을 원점으로 한..
WEB/CSS
[CSS] CSS 초기화하기(Reset CSS, Normalize CSS )
user agent stylesheet 브라우저마다 css를 다르게 적용한다. > 모든 브라우저에서 동일되게 보이도록 통제한다. 🔻CSS 초기화작업🔻 브라우저 설정을 막는다. 1. Reset CSS https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in..
WEB/CSS
[CSS] 요소의 좌우위치 조정 : float
🔻float🔻 기존의 출력 정책을 깨고, 자신의 위치에서 벗어나 현재 라인의 좌측(우측) 끝으로 이동한다. float: left; 또는 float: right;를 사용하여 요소를 왼쪽이나 오른쪽으로 이동한다. 이동 시, 라인의 윗쪽으로 붙는다. 인삿말 중부지방과 전북, 경북권은 오후까지, 강원 남부와 충북, 경북 북부는 밤까지 비가 이어지겠다. 26일부터 이틀간 예상 강수량은 수도권(서해5도 제외)·충청권 5∼30㎜, 강원영동·경북북부 동해안 20∼70㎜, 강원영서·대구·경북(북부 동해안 제외), 울릉도·독도 5∼40㎜, 전북·서해5도 5∼20㎜다. 광주·전남 5㎜ 미만, 부산·울산·경남은 5㎜ 안팎, 제주도는 5∼10㎜의 비가 26일 하루 동안 내릴 것으로 예보됐다. 아침 최저기온은 18∼22도, 낮 ..
WEB/CSS
[CSS] 요소의 출력 방식 제어 : display(***)
🔻DISPLAY🔻 가장 많은 속성을 가지고 있다. 요소의 출력 방식을 제어하는 역할이다. 기본값이 상황에 따라 달라진다. 블럭 태그 일 때 기본값 : block 인라인 태그 일 때 기본 값 : inline block (블록) display: block; 블록 레벨 요소로 만든다. 요소가 가로 전체 영역을 차지하며, 새로운 줄에서 시작한단. width, height와 같은 속성을 설정할 수 있습니다. inline (인라인) display: inline; 인라인 요소로 만든다. 요소가 콘텐츠의 흐름 중간에 들어가며, 너비와 높이를 가지지 않는다. width와 height 속성이 적용되지 않습니다. inline-block (인라인 블록) display: inline-block; 인라인 블록 요소로 만듭니다. ..
