본문 바로가기

프로그래밍 공부/HTML&CSS

(15)

[ex38~] CSS(shadow) ex38 그림자, shadow 1. text-shadow: x y blur color; 2. box-shadow: x y blur color; 직접만드는 것보다 구글링추천 > css shadow example https://getcssscan.com/css-box-shadow-examples 코드 더보기 빨강 노랑 파랑 ex39 background 1. background-color 2. background-image 3. background-repeat 4. background-position 5. background-attachment

[ex34~37] CSS(selector-nth:child,접은글,::before) ex34 가상 클래스 1. :first-child > 자신이 자신의 그룹에서 첫번째 자식인지? 2. :last-child > 자신이 자신의 그룹에서 마지막 자식인지? 3. :nth-child() > 1부터 시작 4. :nth-last-child() > 뒤에서부터 n 1. 숫자: index(위치) > 1부터 시작 2. 수열: 2n, 2n+1 (0부터 시작) 3. 수열: even, odd 코드 더보기 목록 강아지 고양이 다람쥐 소 돼지 말 코끼리 사자 호랑이 늑대 테이블 item item item item item item item item item item item item item item item item item item item item item item item item item item item..

[ex33] CSS(box-sizing) ex33 사이즈 측정: 1. content-box: 상자의 실제 크기 = width(height) + 패딩 + 테두리 2. border-box: 상자의 실제 크기 = width(height) 상자1 상자2 상자3 화면 더보기

[ex25~28] CSS(position, align) ex25 요소의 위치, position 1. padding > 부모가 자식의 위치 지정 2. margin > 스스로 위치 지정 3. position > 정석(CSS1~CSS3) 4. transform > 정석(CSS3) position - 좌표값 사용 > 위치 지정 - x(left), y(top) - 좌표를 지정하는 방식 여러개 제공 1. position: static; - 기본값 - 정적 좌표 - 워드 프로세스 방식 > FlowLayout 방식 - 코딩 순서대로 출력되는 방식 - 먼저 코딩 > 위에 배치, 왼쪽에 배치 - 나중에 코딩 > 아래에 배치, 오른쪽에 배치 2. position: absoulte; - 절대 좌표 - left, top - 문서의 좌측 상단을 기준으로 한다. (X) > 자신의 직계..

[ex24] CSS(초기값 초기화) ex24 CSS 초기값 > 초기화 1. Reset CSS 2. Normalize.css 3. 디자인 프레임워크 or 라이브러리 - Bootstrap - Pure CSS(https://purecss.io/) 문자열입니다. 제목입니다. 문자열입니다. 문단입니다. 문자열입니다. 영역입니다. 문자열입니다. A Primary Button data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data data dat..

[ex21~23] CSS(display, float) ex21 display - 요소의 출력 방식 1. none 2. inline 3. block 4. inline-block -블럭 태그의 display 기본값: block / 인라인 태그는 inline -서로 바꿀 수 있음. 인라인 block으로 바꾸면 width, height 지정 가능(inline에 지정하면 안먹힘) - inline-block > 인라인 태그처럼 출력 + 너비/높이 지정 가능 메뉴메뉴메뉴메뉴메뉴 블럭 태그 상자1 상자2 상자3 인라인 태그 링크1 링크2 링크3 화면 더보기

[ex18] CSS(Box) ex18 전체코드 게시판 번호 제목 이름 날짜 읽음 01 Lorem ipsum dolor sit amet. Lorem. 2023-04-01 01 02 Quod praesentium voluptates cum culpa! Atque? 2023-04-02 02 03 Delectus officiis facere quibusdam! Iste. Expedita. 2023-04-03 03 04 Illo magnam sit dolorem officiis? Laudantium. 2023-04-04 04 05 Ad minus qui officiis dicta. Eos! 2023-04-05 05 06 Neque accusamus nemo repellat ad? At! 2023-04-06 06 07 Repellat beat..

[ex15~17] CSS(box) ex15 CSS 박스 모델, Box Model - 모든 태그는 사각형으로 랜더링(출력) 된다. - 태그가 화면에 출력될 때 공통된 성질에 관련된 정책(모델) 1. border 2. width, height 3. padding 4. margin 1. 테두리, border - 모든 태그는 자신의 영역을 가진다. - 영역이 항상 사각형이다. > 테두리 - 테두리 > 표현O, 표현X #box1 { background-color: yellow; } #box2 { border-color: black; /* 선의 색상 */ border-width: 1px; /* 선의 두께 */ border-style: solid; /* 선의 종료(solid, dashed, dotted) */ } /* 아래처럼 줄여서 작성 가능 */..

이전 1 2 다음

티스토리툴바