본문 바로가기

CSS

(28)
CSS Magin과 padding 주황색은 margin 영역, 위, 오른쪽, 아래, 왼쪽에 모두 50px 노란색은 border 영역, 보더의 두께는 5px이다. 초록색은 padding 영역, 위, 오른쪽, 아래, 왼쪽에 모두 50px 요소의 가로는 273px, 세로는 90px boder 테두리가 그려지면 padding이 border내에 생기는 영역입니다. ***위의 그림에서 273px이라는 가로 값은 padding영역이 합쳐진 가로 길이입니다.*** margin은 border 외부에 생기는 여백입니다. 두 번째 사진처럼 margin까지(주황색) 합쳐진 가로길이는 총 373px입니다. 273 + 50(왼쪽margin) + 50(오른margin) = 373 순수 내용(파란색영역)은 padding과 border를 제외한 길이인데 계산해보면 1..
문구 스타일 텍스트 정렬은 왼쪽정렬, 가운데정렬,오른쪽 정렬이 있습니다. property는 text-align입니다. .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } text-align을 주지 않으면 왼쪽정렬입니다. 모든 요소의 기본 정렬은 왼쪽 정렬입니다. 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았습니다. span은 inline-element이기 때문에, span이 차지하는 영역은 "span의 오른쪽 정렬" 만큼의 길이밖에 안 되기 때문입니다. indent css로 들려쓰기 css로 들여쓰기도 할 수 있습니다. .js-description { text-indent: 50px; ..
Css 폰트 style font family font-family는 폰트 스타일을 지정하는 속성입니다. #title { font-family: Georgia, "Times New Roman", Times, serif; } 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하겠다는 뜻입니다. 만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다. "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다. font size h1 { font-size: 30px; } .big-size-font { ..
css? 그리고 작성법 CSS cascading style sheets HTML의 디자인을 입혀주는 스타일시트 CSS 적용 1. 인라인 스타일: 태그 style 속성에 직접 작성할 수 있습니다. EX FRONTEND 101 2. style 태그 HTML 파일내에 CSS를 작성하는 방법 EX 3.CSS 파일에 작성 CSS파일을 따로 작성해서 적용하는 방법 EX CSS 구조 제일먼저 선택자 지정을 하고 왼쪽의 color는 property(속성)이라고 합니다. Red는 속성값입니다. selector는 여러 종류가 올수 있습니다. ( class,id,tag ) tag: 태그이름 p { font-size: 12px; } class: .클래스이름 클래스에 디자인을 적용하고 싶을 때는 selector에 .(dot)이 필요합니다. .prof..