프론트엔드/CSS (5) 썸네일형 리스트형 CSS 07_float float 속성의 기본 5가지 값 HTML 요소에 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 되고 이에 따라 인접한 텍스트 또는 inline 요소가 그 주위를 자연스럽게 감싸게 됨 none : 기본값으로 요소를 띄우지 않음 left : 요소를 왼쪽에 띄움 right : 요소를 오른쪽에 띄움 inherit : float 속성을 부모 요소로부터 상속받음 initial : 기본값으로 설정함 left 또는 right을 가장 자주 사용한다. clear 속성 float 속성을 적용하면 그 다음 요소들은 계속해서 float 속성이 적용된 요소를 둘러싸게 되는데 이러한 상황을 벗어나기 위해서는 clear 속성을 적용하면 된다. clear : none => 기본값 clear : r.. CSS 06_display display 속성의 기본 4가지 값 display 속성은 HTML 요소를 어떻게 표시할지 결정한다. none : 요소를 보이지 않게 설정한다 visiblity : hidden => 영역은 차지하지만 스타일이 보이지 않음 display : none => 영역도 차지하지 않음 block : 가로 영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임 width, height 속성을 지정할 수 있음 div , p , heading (h1~h6) 태그 등이 이에 해당됨 inline : 컨텐츠만큼의 영역만을 차지하며 block과 달리 줄바꿈이 되지 않음 width, height 속성을 지정할 수 없음 inline-block : block과 inline의 중간 형태로 요소는 inlin.. CSS 05_BoxModel [ Box Model 이란? ] 모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하는데 이러한 공간을 CSS에서는 box model로 정의하고 있다. Box Model 은 Content, Padding, Border, Margin으로 구성되어 있다. [ Content ] Content : 텍스트나 이미지가 들어있는 Html 요소의 실질적인 내용을 뜻한다. width나 height로 content의 너비를 지정할 수 있고 이 때 단위는 px, %, vw, vh 등이 올 수 있다. width: 200px; height: 200px; ★ 주의할 점 : div (block level element)와 달리, span과 같은 inline level element는 width와 height가 적용되지 않는다. .. CSS 04_table [기본적인 table 관련 태그] : 표를 만드는 태그로, 표 전체를 감싸는 데 사용한다. : 표의 제목이나 설명을 작성하는 태그 : 표의 행을 의미하는 태그. 자식 태그로 태그나 태그가 반드시 있어야 한다. : 표의 제목 열을 의미하는 태그. 부모 태그인 태그 안에 있어야 한다. (글씨체가 진해짐) : 표의 일반 열을 의미하는 태그. 부모인 태그안에 있어야 한다. : 표의 제목 열들을 묶는 그룹 태그 : 표의 일반적인 데이터들을 묶는 그룹태그. 기본적으로 행그룹태그를 사용하지 않으면 크롬브라우저가 자동으로 tbody 태그로 묶어준다. : 표의 하단 영역을 묶는 그룹태그 => , , 태그는 style을 적용할 때 편리하게 사용하기 위해 쓰는 듯 하다..? [table에 style 적용하기] table {.. CSS 03_font [기본적인 글꼴 관련 속성] font-family : 글꼴 종류를 지정한다. 기본값은 웹브라우저 기본 글꼴 ex) font-family : 'Noto Serif KR', serif; #Noto Serif KR 글꼴로 바꾸되, 만약 브라우저에 없는 글꼴이라면 serif 글꼴을 적용한다. : 사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위치한 폰트파일을 다운로드하여 화면에 보여주는 폰트를 웹 폰트라고 한다. Google Fonts 사이트에 방문하여 또는 @import 문을 사용하여 웹 폰트를 적용할 수 있다. font-size : 글자 크기를 지정한다. font-style : 글자를 이탤릭체로 표시할지 지정한다. font-weight : 글자 굵기를 지정한다. font-variant : 소.. 이전 1 다음
