728x90 프로그래밍/CSS25 16 다단 레이아웃 다단 레이아웃(multi column) 다단레이아웃은 신문 처럼 화면을 분할하여 좀 더 읽기 쉽도록 만든 레이아웃이다. 텍스트 단을 column속성으로 다단을 만들 수 있다. column 속성 column-count 가로로 나열될 텍스트의 단의 개수를 설정 column-gap 단과 단사이의 여백을 설정 column-rule 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 column-span 단과 안의 포함된 요소를 다단편집에서 해제 [예시] column-count 단의 개수 - 3칸 column-gap 단과 단사이의 여백 - 30px column-rule 구분선 - 5px 긴점선 흰색 column-span col.h2를 다단편집에서 해제 다단 레이아웃 다단 레이아웃 Lorem ipsum dol.. 2021. 5. 7. 15 float와 clear float float 속성은 HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들어준다. 현재는 웹 페이지 레이아웃을 작성할 때 더 많이 사용된다. float의 특징 1. float를 적용받은 요소의 다음 요소들이 끌어올려진다. 2. float를 적용받은 요소의 방향을 설정한다. (left,right) [예시] float : left float : right 결과를 보면, 적용받은 요소가 방향 설정되고 다음 요소인 p 문단이 끌어올려진것을 확인할 수 있다. 3. 컨텐츠 크기 만큼만 영역을 설정한다. (블록의 성격을 가짐) 4. float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다. (다른 요소들 보다 떠있음) [예시] width를 설정하지 않으면 부모 요소의 가로폭을 가.. 2021. 5. 5. 14 CSS Position CSS Position 요소의 위치를 결정하는 방식을 설정한다. CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있다. 1. 정적 위치(static position) 지정 방식 2. 상대 위치(relative position) 지정 방식 3. 고정 위치(fixed position) 지정 방식 4. 절대 위치(absolute position) 지정 방식 1) 정적 위치(static position) 지정 방식 HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식이다. top, left, right, bottom 속성값을 사용할 수 없으며, 단순히 웹 페이지 흐름에 따라 차례대로 요소들의 위치를 결정한다 2) 상대 위치(relative.. 2021. 5. 3. 13 CSS Form CSS Form 폼요소의 스타일을 결정할 수 있다. 1)focus 폼요소가 포커스를 가지고 있을 때 스타일을 설정한다. [예시] 폼 요소 아이디 비밀번호 [결과] 2) cursor: pointer 커서의 모양을 설정한다. [예시] [결과] 마우스 커서를 확인해주세요! 버튼위로 커서가 올라오면 손가락 모양으로 바뀌는것을 확인할 수 있다. 열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다. 수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 2021. 5. 3. 12 CSS display CSS display display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나이다 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다. 1) block display 속성값이 block인 요소는 언제나 새로운 라인에서 시작하고, 해당 라인의 모든 너비를 차지한다. 2) inline display 속성값이 inline인 요소는 새로운 라인에서 시작되지 않고 옆으로 정렬된다. 너비도 해당 라인 전체가 아닌 해당 HTML요소의 내용만큼만 차지한다. 이 둘을 비교해 보자 :) 디스플레이 - 1 inline block [결과] 3) inline-block 선(line)이지만 면(block)의 속성을 가지고 있기때문에 둘의 설정값을 모두 사용할 수.. 2021. 5. 3. 11 테이블 테두리 변경하기(border-collapse) 테이블 테두리 설정(border-collapse) border-collapse은 테이블 셀들 간에 공백을 처리할지 여부를 결정하는 속성이다. separate 기본값, 셀들을 분리해서 공백을 만든다 collapse 셀들을 합쳐서 사이의 공백을 없앤다 [예시] table{border-collapse: collapse;} 적용해 보자 ! 테이블 테두리 자주 사용하는 브라우저 개발사 브라우저 이름 구글 크롬 마이크로 소프트 엣지 애플 사파리 열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다. 수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 2021. 5. 3. 10 둥근 테두리 만들기(border-radius) 둥근 테두리(border-radius) 1) 디테일하게 설정하는 법 선택자{border-radius: top-left-x top-right-x bottom-right-x bottom-left-x/ top-left-y top-right-y bottom-right-y bottom-left-y} [예시] 둥근 테두리 [결과] 2) 간단하게 설정하는 법 선택자{border-radius: top-x bottom-x / top-y bottom-y} 선택자{border-radius: xy} [예시] [결과] [내가 만든 사이트에 적용한 예시] 마켓 상세페이지 네모를 둥글게 만들었다 :) #brown{ background-color: rgb(82, 63, 22); width: 130px; padding: 5px; te.. 2021. 5. 3. 09 박스모델(BOX MODEL)과 박스 사이징 박스 모델 (BOX MODEL) - 모든 HTML요소는 박스 모양으로 구성된다. - 박스 모델이라고 부른다 - 박스 모델은 HTML요소를 패딩, 테두리, 마진, 내용으로 구분한다. 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다. 패딩(padding) 내용과 테두리 사이의 간격이다. padding-top 위쪽 간격을 설정한다. padding-right 오른쪽 간격을 설정한다. padding-bottom 아래쪽 간격을 설정한다. padding-left 왼쪽 간격을 설정한다. padding 모든 패딩 속성을 한꺼번에 설정한다. 방향은 위부터 시작해서 시계방향으로 설정한다. [예시] div{padding-top: 20px;} div{padding-right: 20px;} div{.. 2021. 5. 3. 08 CSS의 배경 CSS의 배경 1) background-color HTML요소의 배경색을 설정한다. [문법] 선택자{ background-color: 색상값;} [예시] CSS 배경 - 1 배경 적용하기 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore repellendus eum facere rerum ex in eaque ad magni nemo atque. Necessitatibus totam excepturi vitae facere dignissimos praesentium molestiae porro soluta! [결과] 2) backgroung-image HTML요소의 배경으로 나타날 배경 이미지를 설정하며, 배경 이미지는 기본 설정으로.. 2021. 4. 27. 이전 1 2 3 다음 728x90 반응형
