빈코더

1. HTML 이미지 넣기 html에 이미지 넣기를 해보겠습니다. 이미지를 넣는 방법은 2가지가 있는데요 img 태그를 사용 background-image로 이미지 넣기 1. img로 태그를 사용하여 이미지 넣기 방법은 간단합니다. 위와 같이 하시면 됩니다. 그럼 속성을 하나하나 살펴볼까요 ? alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트 src: 이미지 파일 경로 or 이미지 url 주소 보면 사진이 너무 큰것 같습니다. 사이즈를 줄여보도록 하겠습니다. img { width: 150px; } 위와 같이 css설정으로 크기를 줄일수도 있습니다. img 태그의 속성중 width와 heigth가 있지만 css에서 작성하시는게 나중에 ..

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. Margin과 Padding 모든 요소는 아래와 같이 margin, border, padding의 스타일을 갖고 있습니다. 위의 그림을 해석해보자면, 주황색은 margin 영역, 위, 오른쪽, 아래, 왼쪽에 모두 5px 노란색은 border 영역, 보더의 두께는 5px이다. 초록색은 padding 영역, 위, 오른쪽, 아래, 왼쪽에 모두 20px 요소의 가로는 820px, 세로는48px border는 다음 시간에 배우겠지만, 요소에 border 스타일을 주면 테두리가 그려집니다. padding은 border 내에 생기는 영역입니다. 그리고 위의 그림에서 820px이라는 가로 값은 padding영역이 합쳐진 가로 길이입니다. margin은 border 외부에 생기는 여백입니다. 두 번째 사진처럼 ma..

1.문구 스타일 문구 스타일에 대해서 알아보도록 하겠습니다. 1. 텍스트 정렬 텍스트 정렬은 왼쪽정렬, 가운데정렬, 오른쪽 정렬이 있습니다. property 이름은 text-align이고 값은 left, center, right입니다. index.css에 특정 클래스이름으로 각각의 정렬 스타일을 작성해두었습니다. .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } 모든 요소의 기본 정렬은 왼쪽 정렬입니다. 2. indent css로 들여쓰기도 할 수 있습니다. .js-description { text-indent: 50px; } html 코드내에서 스페이스와 엔터를 아무리 추가하여도 실제 결과 화..

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로 지정해주니..

1. HTML Attribute(속성) HTML Attribute에 대해서 다시 한 번 보겠습니다. 네이버로 이동 a는 tag 이름이고 href는 attribute(속성) 이름이며 https://naver.com는 href 속성에 대한 attribute 값이고, "네이버로 이동"은 contant(내용)입니다. 꼭 a tag가 아니더라도 attribute를 사용 할 수 있습니다. 사용 하는 tag에 따라 사용하는 attribute도 달라집니다. 처음에는 tag도 공부해야 하고 attribute도 공부해야 하기 때문에 머리가 좀 아프지만... 공부를 하면서 tag와 attribute는 익혀나가시면 됩니다. 1 - 2. ID id는 각 태그에 이름을 주는 속성입니다. 이름은 이름인데, 주민등록 번호와 같이 한..