빈코더

1. CSS selector 이번엔 selector의 표현과 우선순위에 대해서 알아보겠습니다. 아래는 앞 내용을 아신다면 다 아시는 css입니다. p { font-size: 20px; } .p-tag { color: gray; } #third-line { text-decoration: underline; } copied! class나 id가 selector일때 태그와 결합할 수 있습니다. 첫 번째는 p태그이면서 p-tag 클래스이다. p.p-tag { color: gray; } 두 번째는 p태그이면서 third-line 아이디이다. p#third-line { text-decoration: underline; } 여러 selector를 사용할 수도 있습니다. 아래 css에서 최종적으로 적용되는 select..

1. CSS 상속(Inheritance)과 그룹(Grouping) 상속(Inheritance)과 그룹(Grouping)에 대해 알아 봅시다. 1. 상속(Inheritance) 상속(Inheritance)은 css가 가진 특성입니다. 말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미입니다. body { color: red; font-size: 15px; } body라는 태그에 color는 빨간색으로, 크기는 15px로 스타일했습니다. 그리고 body 태그안에 p 태그가 있다고 가정하고 진행을 해보도록 하겠습니다. 나는 자식이다 따로 p 태그에 css 설정을 해주지 않고 body 태그에만 속성 설정을 해주었는데 p태그가 글씨는 빨간색 사이즈도 15px 사이즈로 변했습니다. 위와 같이 상위..

1. Box-sizing box-sizing에 대해서 알아봅시다. css 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용이 됩니다. width + padding + border = 요소의 실제 너비 height + padding + border = 요소의 실제 높이 즉, 요소의 너비 / 높이를 설정할 때 요소가 설정 한 것보다 더 크게 나타나는 경우가 많습니다 (요소의 테두리와 패딩이 요소의 지정된 너비 / 높이에 추가되기 때문). 따라서 크기를 설정할 때, 원하는 크기를 얻으러면 테두리나 안쪽 여백을 고려해야 합니다. 예를 한번 들어 볼까요? .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { w..

1. Border border(테두리)는 앞에 8장에서 잠깐 나온 스타일 입니다. p { border: 5px solid red; } span { border: 1px dotted #0000ff; } border: 두께 선스타일 선색깔; 위와 같이 코딩하시면 됩니다. 선 스타일의 종류입니다. dotted dashed solid double groove ridge inset outset 이 중에 거의 solid만 사용하지만, 다른것도 알아두시면 좋습니다. 선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다. blockquote { border-top: 4px double red; border-right: 2px solid #666666; border-bottom: 6px..

1. Font Style 이번엔 Font Style를 확인해보도록 합시다. 1. font family #title { font-family: Georgia, "Times New Roman", Times, serif; } 위 코드를 한번 봐볼까요? 앞에서 배웠듯 #은 id의 요소를 바꿀때 사용하였습니다. font-family는 폰트 스타일을 지정하는 속성입니다. 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하겠다는 뜻입니다. 만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다. "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는..

1. CSS(Cascading Style Sheets) 뜬금 없이 왠 CSS냐고 하실 수 도 있는데 html과 css는 뗄 수 없는 관계기 때문에 한번만 보고 가도록 하겠습니다. CSS란 HTML 요소들에 디자인을 입혀주는 것 입니다. HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면, CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것입니다. 2 . CSS 적용 css를 작성 후 HTML에 적용하는 방법은 3가지가 있습니다. 인라인 스타일 style 태그 css 파일에 작성 차례 대로 알아보도록 하겠습니다. 2 - 1. 인라인 스타일 태그 style 속성에 직접 작성하는 방법입니다. FRONTEND 101 h1 tag에 style속성을 주고 color을 red로 지정해주니..

여러 tag를 알아보자 1장! 여러가지 tag를 알아보도록 하겠습니다. 1 - 1. h1 ~ h6 tag는 heading 1 의 줄임말입니다. ~ 까지 있습니다. 위 사진을 보면 이 제일 크고 숫자가 커질수록 글씨 크기가 작아지는걸 볼 수 있습니다. 1 - 2. tag는 주로 텍스트를 넣어줍니다. 사용 법은 위와 같고 보다시피 개행이 되지 않고 한줄에 이어 나오는걸 볼 수 있습니다. 이렇게 한줄에 이어 나오는 요소를 inline-element라고 합니다. 1 - 3. tag 또한 텍스트를 주로 넣는 tag입니다. tag는 paragraph의 줄임말로, 주로 문단을 통으로 넣을때 사용합니다. tag는 tag와 달리 개행(줄바꿈)이 되는것을 확인이 가능합니다. 1 - 4. tag는 클릭하면 링크된 곳으로 화..