빈코더

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는 각 태그에 이름을 주는 속성입니다. 이름은 이름인데, 주민등록 번호와 같이 한..

여러 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는 클릭하면 링크된 곳으로 화..

1. HTML 파일의 구조 HTML 파일의 구조에 항상 아래와 같습니다. 위 코드를 한번 살펴보도록 합시다. 1 - 1. HTML 파일의 제일 첫 째줄에 위치하는 선언문 입니다. 는 HTML 태그는 아닙니다. 해당 html 파일이 어떤 버전의 html을 사용했는지 브라우저에 알려주는 역할을 합니다. 선언을 해주면 html5 버전을 사용한다는 의미입니다. html5는 가장 최신 버전 입니다. 1 - 2. 를 제외한 모든 요소들을 감싸는 tag입니다. 브라우저가 을 만남으로써 html의 시작을 감지하고 요소를 그릴 준비를 합니다. 1 - 3. 위와 같이 문자 셋을 지정해 주거나() 모바일 기기를 고려한 정보를 주기도 합니다() 그리고 웹 페이지의 이름에 대한 정보도 줍니다(repl.it). 1 - 4. ta..

1. HTML(Hypertext Markup Language)의 정의와 기능 안녕하세요!! 오늘은 HTML의 정의와 기능에 대해서 알아보려고 합니다. 한번 확인해봅시다! HTML은 웹 페이지를 만들기 위한 Markup 언어이다. HTML은 구조가 단순하고 다른 프로그래밍 언어에 비해 단순한 구조를 가지고 있어 문법이 쉽다. HTML로 웹페이지의 구조를 잡을 수 있습니다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다. HTML은 위 특징 말고도 다른 많은 특징들이 있습니다. 2. HTML 파일 HTML파일은 끝에 .html 확장자가 붙은 테스트 파일입니다. 파일 이름은 다음과 같이 정할 수 있습니다. index.html main-page.html login..