잡코더

MIME Type Link 와 Style tag 에서는 원래 type을 지정해야한다. 하지만, 모두 기본 값으로 text/css가 지정되어 있어서 생략이 가능하다. —> 만약 css가 아닌 다른 type을 사용하면 명시해야 한다!!!! MIME type MDN https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types MIME 타입 - HTTP | MDN MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도 developer.mozilla.org MIME type이란 클라이언트에게 전송된 문서의 다양..

Style Tag Style Tag는 CSS 를 html 내부에서 직접 구현 가능캐 하는 tag이다. Style tag에는 type이라는 속성을 추가할 수 있다. Style tag 안에 어떤 타입의 내용을 작성할 것인가를 명시하는 것이다. 그것이 text이고 css이다. 그런데 우리는 왜 계속 명시해 줬지 않았는가? HTML5 부터는 style tag type 부분은 자동으로 명시가 되어있다. Default value에 해당한다. Style tag의 경우 body tag에서 사용해도 같은 결과물을 얻을 수 있다. 하지만, HTML이 브라우저에서 동작하는 프로세스애 대해서 효율적인 방식은 아니다. 작성이 가능하고 오류는 없지만 head tag에 선언하기를 권장한다. Style Tag MDN https://..

Link Tag 외부에서 CSS 파일을 가져와서 연결하는 tag이다. Link 에서는 relationship attribute는 필수 항목이다. Hyper text reference 에는 경로를 지정한다. (필수는 아니다) CSS에서 body seletor에 background를 지정하면 viewport에 해당 색이 칠해진다. Link Tag MDN https://developer.mozilla.org/ko/docs/Web/HTML/Element/link 현재 문서(html)와 외부 리소스(거의 CSS)와의 관계를 명시해서 가져온다. 콘텐츠 범주: Metadata contents 로 head에서 지정하는 것이다. charset은 사용못한다. CORS(Cross Origin Resource Sharing)..

Meta Tag MDN   https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 , , , , 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta" data-og-url="https://developer.mozilla.org/ko/docs/Web/HTML/E..

주요범위 HTML, HEAD, BODY, TITLE 이것은 후에 나올 내용을 HTML5 version으로 해석해서 브라우저에 출력을 해달라고 명시를 하는 것이다. HTML Tag HTML tag 는 HTML 문서의 시작과 끝을 범위를 설정해 주는 것이다. html 파일 안에 html tag 안에 있는 것만 파일 파일안에 포함된 영역이라 생각한다. Html 안에는 language 라는 전역 속성이 존재한다. 이 문서가 가질 기본적인 언어를 지정하면 된다. 우리는 국가 표시가 아닌 언어 표시를 하는 것이다. HEAD Tag 문서의 정보에 해당하는 영역이다. Title, meta, style, line tag 를 이용해서 이를 사용할 수 있다. 기타 정보는 meta tag를 이용하며 빈 태그이다. 그래서 / ..

Block & Inline 왜, 어떻게 구분이 되며, 어떻게 바꿔쓸 수 있는지 확인해보자 —> display Body default value를 초기화 하고 span tag를 다음과 같이 지정했다. 그런데 다음과 같이 사용하면 inline element인 span tag가 block element 처럼 사용할 수 있다. Inline tag는 width, height로 수정되지 않는다. 하지만 display를 block로 지정해서 block element로 만들었다. 그럼 다음과 같은 결과가 나온다. 물론 그 반대인 경우도 가능하다. 각 tag들은 default value로 각각에 맞는 block, inline 으로 지정되어 있다. Inline element의 display를 block로 지정하면 bloc..

인라인 요소 span, img 등 특성 1. 필요한 만큼의 너비를 사용한다. 2. 크기를 지정할 수 있다. 3. (width: 0; , height: 0; 로 시작) 4. 수평으로 쌓임 5. Margin, padding 위, 아래는 사용을 할 수 없다. 6. Text를 다루는 용도로 사용 1. 필요한 만큼의 너비를 사용한다. Div tag를 HTML과 CSS에서 span tag로 변경해보자 그럼 화면에 아무것도 나오지 않음을 확인할 수 있다. 그럼 span tag에 “안녕”이라는 content를 넣어서 확인해보자 이렇게 inline element 는 필요한 부분만 공간을 차지한다. 인라인 요소안에 내용을 추가하면 추가한 너비만큼 늘어난다. 2. 크기를 지정할 수 없다. Inline 요소를 width, h..

블록 요소 div, h1, p 특성 1. 사용가능한 최대 가로 너비를 사용한다. 2. 크기를 지정할 수 있다. 3. (width: 100%; , height: 0; 로 시작) 4. 수직으로 쌓임 5. Margin, padding 위, 아래, 좌, 우 사용 가능하다. 6. 레이아웃을 잡는 용도로 사용 1. 사용가능한 최대 가로 너비를 사용한다. 우리가 이전 HTML 기본에서 배운 내용이다. default value는 width는 100%이고, height는 0에서 부터 안의 요소에 따라 증가한다고 했다. HTML에서 content가 비어있는 div를 생성할 경우 결과물이 아무것도 나오지 않는다. 그래서 height를 지정하고 살펴보자! height를 설정해줘서 빨간 네모를 확인할 수 있다. 여기서 브라우져..

완성본: https://heropcode.github.io/GitHub-Responsive/ GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com HTML 예제: https://yeongwoo-cho.tistory.com/200 5. HTML 예제 우리가 HTML, CSS를 학습하고 만들 페이지이다. 살펴보자!! ..

1. Property (크기) —> 요소의 크기, 텍스트의 크기 요소는 네모로 존재한다. 예제 2. Property (여백) —> margin / padding 2-1. margin(요소의 바깥 여백) 요소의 바깥 여백을 지정한다. 바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용한다. 1, 2 사이에 거리를 만들 수 있는 margin은 요소의 바깥 여백에 해당한다. 현재 1번 아이템의 영역은 2번 아이템과 만나는 초록색 지점 까지다. margin의 경우 css에서 5가지의 property를 갖는다. 이렇게 개별적으로 조정이 가능하다. 이렇게 개별속성과 단축속성이 존재하며, 단축속성이 있으면 개별 속성이 존재한다. 이런 개념이 없는 경우 그냥 속성이라고 부른다. 예제 2-2. Padd..

Selector(선택자)의 역할?? Selector은 HTML에 CSS를 적용하기 위해 HTML의 특정한 요소를 선택하는 사인이다. Content 이렇게 모든 div에 대해 글자크기 20px, 빨간색을 만든다. 속성(Properties)과 값(Value) 왼쪽은 property, 오른쪽은 Value에 해당한다. HTML의 속성은 attribute, CSS의 속성은 Property 이다. 태그에 직접 작성하는 인라인 선언방식 Style attribute는 CSS를 이곳에서 선언하겠다를 의미한다. 그런데 우리가 배운 선택자라는 개념이 없다. 우리가 만든 속성과 값의 집합인 CSS 내용을 HTML의 어디에 적용하는가에 대한 내용이다. 이미 선택이 된것 이기에 HTML tag에 직접 스타일링을 하기에 선택자가 ..

우리가 HTML, CSS를 학습하고 만들 페이지이다. 살펴보자!! https://heropcode.github.io/GitHub-Responsive/ GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 이 부분은 header에 해당하며 빨간색 네모로 contents 부분이 존재한다. contents는 header..