잡코더

완성본: 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..

div tag 명확한 의미를 갖지 않기에 단순히 특정 범위를 묶는(wrap) 용도로 사용된다. —> 나중에 CSS, JS를 이용해서 묶음 단위로 제어가 가능하다!!! img tag (이미지 넣는 태그), 빈태그 html에 이미지를 삽입할 때 사용한다. 웹 페이지에는 이미지를 삽입하는 방식이 크게 2가지로 이루어진다. HTML - img tag를 사용 CSS - background 를 사용 이때 src, alt attribute 두개 모두 필수적으로 명시해야 한다. 정보를 가져오지 못했을때 사용하는 대체 텍스트를 명시하지 않을 경우에도 웹표준에 어긋나 표준 검사기를 이용하면 에러가 발생한다.

Head tag에는 어떠한 정보를 나타내는 지를 알아보자! Title Tag Title tag는 웹 페이지의 제목을 나타내며, 화면에 표시하기 위한 용도가 지정하는 것이 아니라 정보로 표현하는 것이다. 하지만, 지정한 부분이 편의성을 위해 브라우저에서 표시되는 것 뿐이다. Meta Tag (웹 페이지의 정보), 빈 태그 —> title, link, style, script tag에서 나타낼 수 없는 기타 모든 정보를 표시하는 정보 태크이다. 기타 모든 정보를 나타내기에 사용하는 방법이 많지만 대표적인 것만 제시한다. Character set (문자를 인코딩하는 방식)을 UTF-8 로 지정했다. 문자 인코딩?? 우리가 화면에 텍스트를 렌더링(출력) 해야하는데, 그 텍스트가 출력되는 방식을 지정하는 것이다...

HTML 문서의 범위 범위를 나타내는 tag이며 하나씩 존재한다. index.html : index.html 파일의 범위가 html tag 시작과 끝이다. : 정보에 해당하는 부분을 head tag로 정의한다. : 전체 문서의 실제 화면에 출력되는 구조적인 부분은 body tag에 정의한다. Section 안에 제목 tag와 분류하는 div tag Div tag에는 순서가 없는 tag와 순서가 있는 tag가 존재한다.

Tag == element(요소) Attributes & Value —> 기능 확장 Img tag는 어떤 이미지를 삽입할지, 그 이미지는 어디에 존재하는지에 대한 정보를 속성과 값으로 명시해야한다. 그리고 img 태그는 닫힘태그에 /img가 아니다. Source == src : 경로 Alternative == alt : 대체 텍스트 외부적 요인으로 인해 데이터를 못 가져 왔을때 삽입되는 텍스트 (필수) —> 정상적으로 데이터를 가져오면 이 텍스트는 삽입되지 않는다. Division == div : 분할 h는 제목을 의미하고, p 는 문단을, img는 이미지 삽입을 의미한다. 그러나, div tag는 의미를 갖지 않는다. 그런데, 우리는 만드는 사람이고 홍길동이 무슨 의미인지를 알고 있다. 그럼 이 tag..