루체

Head부분의 meta 태그는 뒤에 닫는 태그가 없어 사용을 하면 오류가 생길 수 있다! 그리고 meta 태그는 속성을 가지지 않으면 역할을 충실히 이행을 할 수가 없습니다. meta 태그의 속성으로는 name이나 content나 charset등이 사용이 됩니다. charset Character Sets의 약자로 문자가 인코딩 되는 방식을 정해주는 것입니다. 대부분이 UTF-8을 값으로 정해준다. 문자가 인코딩되는 방식을 정해주는 것이기 때문에 title 태그와 같이 문자가 작성이 되어있는 것보다 상위에서 작성이 되어야 한다! EUC-KR이라는 것도 사용이 되긴 하는데 EUC-KR은 완성형이고 UTF-8은 조합형입니다. 완성형은 제대로 된 문장이 없으면 한글이 깨지는 현상이 발생할 수도 있습니다. .....

이번에는 인라인 요소와 블록 요소로 왜, 어떻게 구분되고 어떻게 바꿔서 쓸 수 있는지 알아보겠습니다. 우선 인라인 요소를 블록으로 바꾸는 것을 알아보기 위해 아래 코드를 작성을 해주세요. 안녕 body{ margin:0; padding:0; } span{ background: red; width : 120px; hegith : 80px; } 지금 CSS에 span에 높이와 너비를 입력을 했지만 인라인 요소라서 적용이 안됩니다. 이것을 적용시키기 위해 인라인 요소를 블록 요소로 바꿔보겠습니다. span{ background : red; width : 120px; hegith : 80px; display : block; } 이렇게 display : block 을 사용하면 인라인요소를 사용하는 태그를 블록으로..

HTML에는 기본적으로 블록 요소와 인라인 요소가 존재를 합니다. 블록이 뭐다~ 인라인이 뭐다~ 대충 들어보기만 했기 때문에 정확하게 알아보고 싶어서 검색을 하고 공부를 해봤습니다. 블록요소에는 대표적으로 DIV, H1, P 태그가 있습니다. 인라인 요소에는 span, img 태그 들이 있습니다. 이 개념 자체는 굉장히 오래전부터 있던 것이고 지금 완벽하게 사용이 되고 있는 것은 아니지만 이 개념을 모르면 HTML과 CSS를 사용할 때 문제가 발생을 하게 됩니다. 저도 웹페이지를 현재 만들면서 공부를 하는 중이라 이미지를 넣고, 네비게이션 바를 넣고 하는 것에 있어서 이 블록 요소와 인라인 요소를 정확하게 알고 코드를 작성을 하는 것이 좋겠다 라는 생각을 했었습니다. 블록 요소의 특성들 1. 사용가능한 ..

저는 head부분을 작성을 할 때 주로 그냥 charset과 title만 작성을 해줬는데 다른 것도 있다고 해서 검색을 해봤다. meta에서는 각 속성마다 사용할 수 있는 속성과 값이 정해져 있고 어떤 속성을 사용할 수 있고 사용을 할 수가 없는지 구분을 해야합니다. 물론 암기할 필요는 없습니다. 속성 의미 값 charset 문자인코딩 방식 UTF-8, EUC-KR 등.. name 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터) author, description, keywords, viewport등.. content name이나 http-equiv 속성의 값을 제공 그리고 아직 배우지 않은 전역속성이라는 것이 있는데 그것은 나중에 필요할 때 공부를 해서 또 글을 작성을 해야겠다. 다음으로는 Sc..

왜 3가지로 나누어져 있을까?? 한가지로 만들면 편하지 않을까?? 이 3가지의 언어들은 각각의 역할이 다 있습니다 그 역할의 충실해서 사용을 해야 괜찮은 구조와 디자인, 기능을 가진 웹페이지를 만들 수 있습니다. HTM(Hyper Text Markup Language) HTML은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의를 합니다. 이 부분에 이미지가 들어가고 이 부분엔 동영상이 들어간다 이런걸 정의를 하는 것입니다. HTML은 정적 언어로 웹의 구조를 담당을 합니다. 그래서 이 HTML로 화면을 예쁘게 만들려고 시도하지 않으셔도 됩니다. 일종의 뼈대, 즉 온전히 튼튼한 구조(Semantic)를 만드는 것입니다. CSS(Cascading Style Sheets) CSS는 마크업 언어(HTML..

웹 폰트를 왜 써야 하는가? 홈페이지에 디자인이나 분위기때문에 사용을 하는 것입니다. 웹 폰트를 쓰기위해 해야할 것들이 있습니다 우선 Google Fonts라는 사이트에 들어가봅시다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 여기서 마음에 드는 폰트를 골라보세요! 고른 다음 + 버튼을 눌러주세요! 그럼 아래 사진과 같은 창이 뜨게 됩니다. 이 창은 우리가 이 폰트를 어떻게 사용을 해야되나를 알려주는 창입니다. 우선 IMPORT에 대해서 설명을 드리겠습니다. style 태그를 제외한 import 부분을 복사해 줍시다. 그 ..

이렇게 태그의 이름만 적은 경우 정보가 부족할 수도 있다. ""이 사이에 이미지의 주소를 적게 되면 웹브라우저는 저 주소에서 태그의 위치에다가 이미지를 그려주게 된다. 이미지의 주소가 그냥 웹사이트에서 줏어온 주소가 아닌 자신의 컴퓨터에 저장되어 있는 어떤 파일의 파일명을 뜻하는 것 같다. width="100%"는 내가 올리고 싶은 이미지 크기가 자동으로 창에 맞게 변하는 것을 뜻한다고 했다. src="code.jpg" width="100%" 이렇게 작성된 코드를 속성이라고 부른다. 이 속성은 위치는 상관이 없다. 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 통해서 더 많은 의미를 부가할 수 있게 된 것이다.

이번 글에는 인기있는 태그 두종류를 살펴볼 것입니다. 웹페이지에서 줄바꿈을 하는 태그를 검색을 해보자 HTML new line tag 이 이라는 TAG는 단지 줄바꿈이라는 시각적 의미만을 가지고 있기 때문에 무언가를 감쌀 필요가 없어서 닫는 TAG가 없습니다. 이 TAG 이외에 다른 줄바꿈 TAG도 있습니다. HTML paragraph tag 라는 키워드로 검색을 해봅시다. 그러면 아마도 이 TAG가 나올 것입니다. 결과는 같지만 TAG는 닫는 TAG가 있습니다. 그리고 이 두가지 방법 중 더 괜찮은 방법은 TAG 입니다. 왜냐하면 이 태그는 이 웹페이지를 정보로써 더 가치있게 만들기 때문입니다. 단락이라는 걸 명확하게 보여주기 때문인 것 같습니다... 단락을 바꿀때 여백이 너무 좁으면 태그는 여러번 쓰..