HTML&CSS
-
-
둥근모서리/배경색/배경이미지/그림자HTML&CSS/CSS 2023. 1. 2. 19:02
둥근모서리 (border-radius) /* 모서리 네 개 모두 똑같이 둥글게 */ .div { border-radius: 30px; } /* 각 개별 모서리를 다르게 */ h1 { border: 1px solid green; border-top-left-radius: 50px; /* 왼쪽 위 */ border-top-right-radius: 5px; /* 오른쪽 위 */ border-bottom-right-radius: 0px; /* 오른쪽 아래 */ border-bottom-left-radius: 20px; /* 왼쪽 아래 */ } 배경색 (background-color) /* 색 이름, RGB 코드, HEX 코드 중 하나를 입력 */ h1{ background-color: yellow; /* RGB..
-
OverFlowHTML&CSS/CSS 2022. 12. 20. 19:39
내용물이 들어갈 공간이 부족한 경우가 있습니다. CSS Overflow 1. visible => visible 값을 사용하면 넘쳐나는 내용물이 그대로 보입니다. 따로 설정해주지 않으면 이게 기본값 2. hidden => 넘쳐나는 부분을 아예 숨겨줄 수 있다 3. scroll => 내용물을 숨겼다가, 사용자가 스크롤을 하면 볼 수 있게 해주는 방법 4. auto => scroll과 같은데 scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바를 보여
-
width와 heightHTML&CSS/CSS 2022. 12. 20. 19:28
- CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다 - HTML 요소의 전체 너비(width)를 계산하는 공식 width + left padding + right padding + left border + right border + left margin + right margin - HTML 요소의 전체 높이(height)를 계산하는 공식 height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
-
박스모델(BoxModel)HTML&CSS/CSS 2022. 12. 20. 19:09
1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. 3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다. 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. # 패딩(Padding)을 비교해보자! 패딩 10일때 패딩 100일때 # 마진(margin)을 비교해보자! Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam mali..
-
HTML과 기본 문서 만들기HTML&CSS/HTML 2022. 12. 8. 23:32
1. HTML과 첫 만남 2. HTML 구조 파악하기 프런트엔드 웹 개발 HTML CSS JS 2-1) DOCTYPE html> 2-2) ~ 2-3) - 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부문 - // 헤더 영역 Dream Jeju // 내비게이션 영역 단체 여행 맞춤 여행 갤러리 문의하기 // 본문 영역 몸과 마음이 치유되는 섬 쉼(Healing)의 공간으로 안내합니다 탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다. 상세일정 여행 기간 : 2박 3일 여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다) 다양한 액티비티가 기다리는 섬 모험과 스릴이 넘치는 레저의 천국으로 안내합니다. 둘러보기만 ..
-
-
실습-여행사이트만들기HTML&CSS 2022. 10. 13. 08:24
조건 조건1. 모든 요소가 가운데 정렬 되어있어야합니다. 조건2. ‘travel’ 로고는 가로 길이가 165px, 세로 길이가 58px입니다. 조건3. 'travel' 로고 위에는 80px의 여백이 있습니다. 조건4. 메뉴는 16px의 ‘Helvetica’ 폰트, 색상은 Hex값 기준 58595B, RGB 기준 (88, 89, 91)입니다. 조건5. 현재 머물러 있는 창의 메뉴의 폰트는 진하게 나옵니다. 조건6. 각 메뉴 사이의 간격은 20px이고, 매뉴의 위 아래로 60px의 여백이 있습니다. 조건7. 사진의 가로 길이는 페이지의 가로 길이의 90%입니다. 예를 들어 페이지의 가로 길이가 1,000px이면, 사진의 가로 길이는 900px이 되어야 합니다. // styles.css #logo { disp..