빈코더

1. img 태그와 background-image 속성 1. img 태그의 사용하는게 좋은 경우 프린트가 필요한 경우 -백그라운드 이미지는 출력시 포함되지 않습니다. 이미지에 문구가 사용되어 의미를 가지는 경우 -이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있습니다. 백그라운드 이미지는 alt 태그가 없습니다. 이미지가 콘텐츠의 중심으로 가장 중요한 경우 2. 백그라운드 이미지를 사용하는게 좋은 경우 일정부분만 선택해 보여줄 경우(예 - hover버튼) -간단하게 css를 사용하여 이미지를 다른 것으로 손 쉽게 변경할 수 있습니다. 이미지 위에 텍스트가 들어가는 경우 -이미지 위에 텍스트가 들어가는 경우 간단하게 텍스트 태그 안에 백그라운드를 넣는 방법을 사..

Semantic Web과 Semantic Tags에 대해서 알아보자 1. Semantic Web Semantic Web이란? (위키 참조) - '의미론적인 웹' 이란 뜻으로 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리 하도록 하는 프레임 워크이자 기술이다. 위키를 참조해서 Semantic웹의 사전적 의미를 확인해 보았지만 아직 이해가 안됩니다.. 이해가 안가는 부분이 두가지가 있습니다.. 온톨로지 형태 프레임 워크 온톨로지 형태와 프레임 워크에 대해서도 한번 알아봅시다. 온톨로지란 ? (위키 참조) - 온톨로지(Ontology)란 사람..

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..