SMALL CSS16 CSS) li 관련 (float, 메뉴바 만들기) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML 코드 Home HTML5 CSS3 Javascript2015 jQuery CSS 코드 ul은 block 요소이므로 width를 80vw로 지정하여 너비를 줄여주고, 기본으로 설정 되어 있던 padding-left를 0으로 변경, margin을 auto로 주어 가운데 정렬을 하였습니다. float - 요소를 띄워서 정렬 .menu li { list-style-type: none; float: left; width: 8em; height: 2.5em; background-color: #c9c9c9; text-align: center; border-right: 1px solid #818.. 2022. 5. 16. CSS) display 관련 (inline을 block으로, block을 inline으로, inline-block, 요소 숨기기-display, visibility, opacity) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML 코드 1 2 3 4 5 CSS 코드 는 block 요소이기 때문에 같은 줄에 오지 못하는 것을 확인할 수 있습니다. 이러한 block 요소를 inline요소로 변경할 수 있습니다. display: inline .box { width: 150px; height: 150px; border: 1px solid #000; background-color: slateblue; color: white; } .display-inline { display: inline; } content의 크기만큼 박스 사이즈가 줄어들고 같은 줄에 온 것을 확인할 수 있습니다. (inline 요소는 width, .. 2022. 5. 16. CSS) border 관련 (border-width, border-style, border-color, border-radius) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML 코드 CSS 코드 border-width border-style border-top-color border-right-color border-bottom-color border-left-color 위처럼 각각 나눠서 색 적용 및 굵기, 스타일을 지정할 수 있습니다. HTML 코드 CSS 코드 outline에 대한 설명을 위해 outline을 굵게 표현하였습니다. outline은 border의 바깥쪽을 의미하며, 이 또한 삭제할 수 있습니다. #username { width: 200px; height: 50px; border-top: none; border-right: none; b.. 2022. 5. 16. CSS) Box Model (content, padding, border, margin, box-shadow) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. Box Model 구조 content padding (content와 border 사이의 여백) border (경계영역) margin (border와 다른 요소 사이의 여백) HTML 코드 안녕 CSS 코드 .box의 크기는 지정한 300 x 300으로 확인 됩니다. border border: 1px solid #000; border를 지정하고 확인하니 .box의 크기는 300 x 300이 아닌 302 x 302가 되었습니다. 기존 크기 300 x 300 + 양쪽 1pc씩의 border = 302 x 302가 된 것이죠. padding padding: 5px; /* padding-top: .. 2022. 5. 16. CSS) inline 요소, block 요소 정렬 (text-align, margin, margin-left) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 정렬 관련 ① inline 요소 - 부모 block 요소의 text-align 속성을 이용하여 정렬 - 정렬 대상 : a, img, span과 h1 ~ h6, p 안의 텍스트 ② block 요소 - margin 속성 (다른 요소와의 거리)을 이용해서 정렬 inline 요소 HTML 코드 안녕 링크링크 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus labore magni ipsam sed perferendis molestiae ipsa iusto minus reiciendis dignissimos non, iste n.. 2022. 5. 16. CSS) 텍스트 관련 (text-decoration, color, text-shadow) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML코드 텍스트관련 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. CSS코드 text-decoration text-decoration-style text-decoration-color text-decoration-style : dotted 설정 시 text-decoration-style : double 설정 시 text-decoration-style : wavy 설정 시 이렇게 많은 style을 지원해주며, text-decora.. 2022. 5. 15. 이전 1 2 3 다음 LIST
