◎ HTML5+CSS3
[CSS] div 가운데 정렬하기 [position: absolute일 때 가운데 정렬하는 방법]
- div 가운데 정렬하기 [position: absolute일 때 가운데 정렬하는 방법] div를 사용하다 보면 가운데 정렬하고 싶을 때가 많다. 아래와 같은 div가 있고, child를 가운데 정렬하고 싶다고 보자. 눈으로 볼 수 있도록 아래와 같은 스타일을 추가해준다. 이렇게 하면 왼쪽 상단에 갈색 네모가 위치해 있다. .parent { background-color: white; border: solid 1px black; width: 200px; height: 200px; } .child { background-color: brown; width: 50px; height: 50px; } HTML 삽입 미리보기할 수 없는 소스 - 상단 가운데 정렬 이 위치를 상단 가운데로 정렬해보려고 한다. ch..
[CSS] Flex와 Grid 개념 정리 사이트 추천 [1분코딩, CSS 레이아웃 작성 방식인 Flex와 Grid]
- Flex와 Grid 개념 정리 사이트 CSS 레이아웃 관련해서 찾아보던 중 1분코딩이라는 블로그가 개념을 잘 정리해놔서 포스팅한다. 아래의 게시글들이 Flex와 Grid에 대해 가장 잘 정리해놓았다고 생각한다. - CSS Flex, Grid 관련 게시글 이번에야말로 CSS Flex를 익혀보자 studiomeal.com 이번에야말로 CSS Grid를 익혀보자 studiomeal.com 이 분 인프런에서 Flex와 Grid 관련 강의도 하신 거 같다. 관심 있으신 분은 수강하시길! (따로 돈 받은 거 아님) CSS Flex와 Grid 제대로 익히기 강의 - 인프런 현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다., 당신이 웹 퍼블리셔, 프론트엔드 ..
[CSS3] 연결 선택자(combination selector)란? [하위 선택자, 자식 선택자, 형제 선택자]
- 연결 선택자(combination selector)란? 선택자와 선택자를 연결해 적용 대상을 한정시키는 방법 아래는 연결 선택자 예시를 위한 코드이다. 예약 방법 및 요금 직접 통화 문자 남기기 1인 : 40,000원 2인 : 60,000원 3인 : 480,000원 4인 : 100,000원 4. 형제 선택자(sibling selector) 인접 형제 선택자와 달리 모든 형제 요소에 적용된다. /* 형제 선택자로 변경 */ /* 기준요소 ~ 형제요소 { text-decoration:underline; } */ h1 ~ ul { color:blue; font-weight:bold; } 참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱
[CSS3] 시맨틱 태그(semantic)란? [문서 구조를 위한 HTML5 시맨틱 태그]
- 시맨틱 태그(semantic)란? semantic : 의미가 통하는 태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그 → 사용하지 않더라도 웹 문서를 만들 수 있으나, 웹 접근성 부분에서 매우 중요하다. Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약하기 요안도라 소개 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다. 성산의 날씨는 다음주 내내 높은 구름에 ...... 오늘은 사진에 보이는 긴 돌담을 따라 ...... 내일은 두달 엳동안 밖거리에 만든 ...... 알립니다 게스트 하우스 예약은 전화 070-###-#### ...... 제주특별자치도 남제주군 성산읍 수산리 000번지 요안도라 yan##@naver.com Copyrigh..
[CSS3] 여백을 조절하는 속성들 [margin과 padding으로 여백 조절하기]
- 여백을 조절하는 속성들 1. margin 속성 마진(margin)은 현재 요소 주변의 여백이다. → 한 요소와 다른 요소 사이의 간격을 조절할 수 있다. 제목 내용 제목 내용 제목 내용 제목 내용 2. padding 속성 패딩(padding)은 콘텐츠 영역과 테두리 사이의 여백이다. .outer div { width: 200px; height: 150px; border: 2px solid; margin: 30px; float: left; padding:10px; /* 위에 상자에서 padding 추가 */ } 참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱