본문 바로가기

전체 글

(149)
css 그룹핑과 CSS selector 그룹 이 태그에, 저 태그, 이 클래스에.. 같은 스타일을 적용하고 싶습니다. 그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는 다음과 같이 한꺼번에 스타일을 지정할 수 있습니다. what-is-blockquote, span { color: green; } class나 id가 selector일때 태그와 결합할 수 있습니다. p.p-tag { color: gray; } p#third-line { text-decoration: underline; } 첫 번째는 p태그이면서 p-tag 클래스이다. 두 번째는 p태그이면서 third-line 아이디이다. 라는 뜻입니다. 엄청 길게도 작성할 수 있습니다. .a div .b .pre span { background-color: yellow; } 다른..
box-sizing box-sizing 속성은 적용되는 요소에 대해 box model이 처리되는 방법을 제어한다. 즉 요소의 너비와 높이를 계산하는 방법을 정의한다. 한 단계 더 풀어쓰면 width와 height에 padding과 border를 포함할지 여부를 결정하는 속성이다. 이 방법에 무슨 문제가 있느냐 하면, width: 100px; 을 선언하고 작업을 하다가 padding:10px; 을 추가하면 실제 너비가 120px이 된다. 여러 요소가 얽혀 있다면 깨진 레이아웃을 보며 하나씩 너비를 수정해나가야 할 것이다. 직관적이지도 않고 요소마다 값을 계산하기도 힘들다. box-sizing 속성엔 아래 두 가지 값이 쓰인다. content-box : 디폴트값으로 위의 너비,높이 공식이 적용된다. border-box : 너비..
css Border border:두께 선스타일 선색깔; p { border: 5px solid red; } 이런식으로 표현합니다. solid 외에도 dotted dashed solid double groove ridge inset outset border 만 디자인을 줄수있습니다. blockquote { border-top: 4px double red; border-right: 2px solid #666666; border-bottom: 6px dashed darkviolet; border-left: 1px dotted #00ee44; } 이런식으로 밑줄 태그대신에 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.
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..