Web/CSS (7) 썸네일형 리스트형 #7. Font & Text 1. font의 여러가지 프로퍼티 font-size 텍스트의 크기를 지정한다. px, %, em등의 프로퍼티를 사용할 수 있다. font-style 폰트의 이탤릭체를 지정할 수 있다. font-weight 폰트 굵기 지정에 사용된다. 100~900, bold, lighter, bolder 프로퍼티를 지정할 수 있다. .d1 { font-size: 40px; font-style: italic; font-weight: bold; } .d2 { font-size: 150%; font-style: oblique; font-weight: lighter; } 2. font-family @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@5.. #6. BackGround 1. background-image 프로퍼티 body{ background-image: url("https://post-phinf.pstatic.net/MjAxNzExMThfMTU3/MDAxNTEwOTg1MjU0MDMw.UnE6KDZeDvuggh3tCZyAh1TnZdmvZQGLVZbT2nhBIAYg.9QvOIhmCZnSwa0BXJ8CVs3ROxovGtlVmRmglS2HE8esg.JPEG/20171118-006.jpg?type=w1200"); } 2. background-repeat 프로퍼티 배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다. 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. 이것은 background-r.. #5. display, visibility, opacity 프로퍼티 1. display프로퍼티 display프로퍼티는 layout정의에 자주 사용되는 중요한 프로퍼티이다. block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다 아래는 p 요소에 대한 크롬 브라우저의 디폴트 CSS이다. p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } 1.1 block.. #4. CSS BOX 모든 HTML요소에는 Box형태의 영역을 가지고 있다. 이 Box는 콘텐트(Content), 패딩(Padding), 보더(Border), 마진(Margin)으로 구성된다. Content 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역 Padding 테두리(Border)안쪽에 위치하는 요소의 내부 여백 영역 padding의 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명이다. Border 테두리 영역으로 border의 프로퍼티 값은 테두리의 두께를 의미한다. Margin 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다. margin의 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명하며 배경색을 지정할 수 없다. 1. width / height 프로퍼티 width.. #3. CSS 프로퍼티 값의 단위 CSS에는 cm, mm, inch등의 단위들이 존재하기도 하지만 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px는 절대값이고 em, %는 상대값이다. 대부분의 브라우저의 폰트 기본값은 16px, 1em, 100%이다. 1.1 px px는 픽셀(화소) 단위이다. 1px는 화소 1개의 크기를 의미한다. 예를들어 보통 요즘 영상들은 1920 * 1080의 해상도를 따라가는데 이는 가로에 1920픽셀, 세로에 1080픽셀을 가진다는 의미이다. 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px를 1/96인치의 절대단위로 인식한다. px는 요소의 크기나 이미지 크기 지정에 주로 사용된다. 1.2 % %는 백분률 .. #2. CSS의 다양한 셀렉터 1. 전체 셀렉터 (*) *은 HTML문서 내의 모든 요소를 선택한다. * { color: blue; } 2. 태그 셀렉터 지정된 태그명을 가지는 요소를 선택한다. h1 { color: blue; } p { color: red; } 3. ID 셀렉터 해당 id어트리뷰트값을 가지는 요소를 선택한다. "#어트리뷰트값" 형식으로 작성한다. CSS #header { color: blue; } #text { color: red; } HTML Hello Css! This is paragraph Hello Css! 2 4. Class 셀렉터 해당 class를 가지는 어트리뷰트값을 가지는 요소를 선택한다. ".어트리뷰트값" 형식으로 작성한다. CSS .header { color: red; } .text { color:.. #1. CSS 기본문법 CSS는 HTML이나 XML과 같은 구조화 된 문서를 화면에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소의 style을 정의하여 화면등에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어이다. css는 html문서 내에 바로 style태그를 사용하여 기술할 수도 있지만, css파일을 따로 만들어 지정해주는게 좀 더 깔끔하고 정리된 코드를 만드는데 도움이 된다. Hello Css! css파일을 html에 연동하는 방법은 link태그를 이용하면된다. 가장 일반적으로 사용된다. CSS의 기본 구조에 대해서 알아보자. h1 { color: blue; font-size: 20px; } 위의 코드에서 h1은 셀렉터, 셀렉터의 선언블록 안에 묶인 선언들은 프로퍼티와 값.. 이전 1 다음
