★ Display flex box, flexialbe box 레이아웃 구성 > 내부 요소의 배치 float / position / margin 기본 상태(display : flex) 메인축 방향 : 가로(아이템이 나열되는 방향) 수직축 방향 : 세로 아이템 크기 : 너비(요소 크기만큼) 아이템 크기 : 높이(부모 크기만큼) 아이템 크기 : 메인축(요소 크기만큼) 아이템 크기 : 수직축(부모 크기만큼) display : flex; 실행 결과 기존 방법 1 : float를 사용 하였을 경우 #box::after { content:''; display : block; clear:left; } #box .item { float : left; } 기존 방법 2 : display : inline을 사용하였을 경우 ..
★ OutLine 바깥쪽 테두리를 만드는 역할 테두리 : border 사용 테두리 표현 O, 주변에 영역 침범 X : Outline 사용 사용법 #box2 { /* border : 10px solid cornflowerblue; */ outline : 10px solid cornflowerblue; } border와 비슷하지만 차이가 있음 size에 영향을 안미치고, 테두리가 생김으로 인해서 다른애들을 밀어내는 현상이 없음 실행 결과 ■ Text 상자를 이용한 OutLine HTML 코드 CSS 코드 : border를 주었을 경우 input[type=text] { display: block; /* 한줄 배치 */ margin-bottom: 5px; outline : none; } input[type=te..
★ 변형, Transform 위치, 크기, 회전, 왜곡 등 1. transform : translate() : 위치 변형(이동) 2. transform : scale() : 크기, 배율 변형(확대|축소) 3. transform : rotate() : 회전 변형 4. transform : skew() : 왜곡 변형(비틀기) 5. transform : matrix() : 1~4번 포함. 사용자 정의형 > 행렬 6. transform-origin : 변형 > 기준점(원점) 지정 ■ 사용 ex) ex1) transform : translate(x, y) x축, y축으로 이동 #box1 { background-color: tomato; transform : translate(50px, 0px); } 실행 결과 e..
★ Column 다단 구조 p { column-count : 3; } 컬럼과 컬럼 사이의 간격 column-gap : 20px; 컬럼 테두리 column-rule : 1px solid gray; 실행 결과 ■ Card Layout HTML 코드 Card Layout Lorem ipsum dolor sit amet. Nam in atque praesentium tempore? Asperiores perferendis voluptates nostrum impedit! Est tempore quaerat id adipisci. Obcaecati corrupti earum ad vitae? Eaque eum fugiat dignissimos labore. Consequuntur dicta nulla unde t..
★ 모서리 둥글기 border-radius : px, % 단축의 길이 1/2 = 최댓값 사용 방법 border-radius : 10px; 실행 결과 사용 방법 2 최대 값 : 50% border-radius: 10%; 실행 결과 2 사용 방법 3 border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; 실행 결과 3 이미지에 radius 주기 실행 결과 ★ 아이콘 window + . 버튼 클릭시 아이콘들이 나옴 대중적으로 많이 쓰는 사이트 https://fontawesome.com/start 구글에서 제공하는 사이트 https://..
★ Background 1. background-color 2. background-image 3. background-repeat 4. background-position 5. background-attachment ■ 네이버 로고 가져오기 https://www.naver.com/ 네이버 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요 www.naver.com F12 개발자 모드 > 요소 선택 하단에 링크 https://s.pstatic.net/static/www/img/uit/sp_main_947f65.png 이미지 파일 가져와서 보고 싶은 해당 로고 보이기 ■ 로고 보이기 #logo { width:445px; height: 110px; background-image: url(images/..
★ 그림자, Shadow 1. text-shadow : x y blur color; 2. box-shadow : x y blur color; x : 가로축 위치 | y : 세로축 위치 | blur : 퍼짐정도 사용 ex) div:nth-child(1) { text-shadow: 2px 2px 2px #999; } ■ HTML 코드 빨강 노랑 파랑 ■ 다양한 사용 ex) ex1) div:nth-child(2) { border : 1px solid black; width : 100px; height: 100px; margin: 20px; box-shadow: 5px 5px 2px gray; } div:nth-child(2):hover { box-shadow : 5px 5px 2px black; } 실행 결과
★ CSS 선택자(가상 클래스) 1. :first-child 가상 클래스 검색된 태그 자체를 조작 2. ::before 가상 요소(Element) 검색된 태그 주변을 조작 ★ 전후 선택자 1. ::before = :before 2. ::after = :after ■ HTML 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero laudantium cum deleniti nostrum similique inventore, quam placeat cupiditate porro aliquid ipsam hic molestiae incidunt voluptate laboriosam accusamus! Ad, atque. 빨강 노랑..
