천천히 느리게 천천히 느리게

1. 시멘틱 태그(Semantic Tag)란 ◎ 시멘틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다. non-semantic tag : 와 등 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다. semantic tag : , , , 등 자신의 컨텐츠를 명확하게 정의한다. 2. 시멘틱 태그(Semantic Tag)의 종류 ◎ 시멘틱 태그의 요소는 다음과 같다. 태그 설명 내용을 정의힌다. 페이지 컨텐츠를 제외한 콘텐츠를 정의한다. 링크, 광고, 사이드바 표시 등. 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다. 요소에 대한 캡션을 정의한다. 일러스트레이션, 다이어그램 등과 같은 자체 포함 된 콘텐츠를 지정한다. 문서나 섹션의 머리글을 지정한다. 주로 저작권, 연락처 정보 등 ..

1. float 이란 ◎ float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 속성이 된다. 2. 문제점 ◎ float 속성에는 left, right, none 가운데 하나의 값을 줄 수 있습니다. float를 left로 값을 준 코드와 화면을 봐보자. img 태그에 float: left; 속성을 주어서 왼쪽 정렬을 하였다. 코드만 보고 화면이 어떻게 나올지 예상하자면, img는 왼쪽, span은 img 옆에 나오며, container 클래스의 css border가 그에 맞게 잘 나와야 한다. 자, 이제 화면을 봐보자 이상하다. 예상한 화면과는 전혀 다르게 나왔다. 이처럼 float를 쓸 때는 주의할 사항이 있다. float..

1. position 이란 ◎ position은 이름 그대로 태그들의 위치를 정해주는 css이다. 2. position의 종류 static relative absoulte fixed 2-1. static ◎ static은 기본값을 의미합니다. position:static; 이 설정된 엘리먼트는 특별한 방식으로 위치가 지정된 것은 아니다. static은 많이 사용을 안 한다. 2-2. relative ● relative는 별도의 프로퍼티를 지정하지 않은 이상 static과 동일하게 동작한다. 우선 별도의 프로퍼티를 지정하지 않은 것을 확인해보자. 위의 화면을 보면 프로퍼티를 지정하지 않으면 static과 동일한 위치로 나온다. ● 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를..

1. Flex 란. ◎ 레이아웃을 수평구조로 쌓이게 할 때 사용한다. ※등장하기 전 에는 인라인 속성을 이용해 수직, 수평 정렬에 대체 방법을 사용하였는데 이는 차선책일 뿐 flex가 나온 후로부터 레이아웃을 더 쉽게 구성할 수 있다. 2. 변화. 과거에는 float 속성을 이용하여 수평화 하는 작업을 진행하였다. 하지만 현재에는 flex를 사용하여 더 간단하게 수평의 레이아웃을 구현할 수 있다. 3. flex와 inline-flex의 차이점 3-1. display:flex -> container가 수직으로 쌓임(block 요소와 같음.) 3-2. display:inline-flex -> container가 수평으로 쌓임(inline 요소와 같음) 4. container와 items ◎ container..

1. CSS 선택자 ◎ 속성과 값을 지정할 대상을 검색하여 html에서 원하는 태그를 찾아주는 역할. ※선택자를 잘 못 다루면 css 적용하기가 힘들다. 2. 선택자의 종류 기본 선택자(Basic Selectors) 복합 선택자(Combinators Selectors) 가상 클래스 선택자(Pseudo-Classes Selectors) 가상 요소 선택자(Pseudo-Elements Selectors) 3. 기본 선택자(Basic Selectors) 전체 선택자(Universal Selector) 태그 선택자(Type Selector) 클래스 선택자(Class Selector) 아이디 선택자(Id Selector) 3-1. 전체 선택자(Universal Selector) 모든 요소를 선택 * 기호를 사용 전..

1. CSS 란 CSS(Cascading Style Sheets)는 마크업 언어(HTML)가 실제 표시되는 방법(색상, 크기, 폰트 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당한다. 2. CSS 특징 적당한 크기와 아름다운 색상, 원하는 위치를 지정하는데 집중할 수 있다. 예쁘게 만드는 것만 집중할 수 있다. 선택자를 사용하여 원하는 작업을 할 수 있다. 다양한 방식으로 CSS를 적용할 수 있다. 3. CSS 문법 선택자 { 속성: 속성값; 속성: 속성값; } 선택자 { 속성: 속성값; 속성: 속성값; } 위의 두가지 방법의 문법이 있다. 차이점이 있다면 옆으로 길게 쓰는 것과 아래로 길게 쓰는 차이이다. 개인의 취향대로 사용하면 되지만 옆으로 길게 하면 가독성이 떨어진..

1. HTML 이란 HTML(Hyper Text Markup Language)은 페이지 제목, 문단, 표, 이미지, 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당합니다. HTML은 온전히 튼튼한 구조(Semantic)를 만드는 것에만 집중해야 한다. 2. HTML 특징 HTML5 기준으로 작성해야 한다. 웹 표준성을 고려해야 한다. (웹에서 사용되는 표준 기술이나 규칙을 의미하며 W3C의 권고안에서 나온 기술들이 해당함.) 웹 접근성을 고려해야 한다.(고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법을 뜻함.) 의미론적(Semantic)인 내용 위주로 작성한다. 3. HTML 요소 HTML..