Study/HTML & CSS
-
[코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, FloatStudy/HTML & CSS 2019. 11. 23. 10:32
[ 브라우저에서 사용하는 좌표계 ] : 기본적으로 element는 위에서 아래로, 왼쪽에서 오른쪽으로 확장된다. 왼쪽 상단의 좌표가 (0,0) 이다. 좌표는 px 단위 또는 % 단위 등을 쓸 수 있다. 좌표계를 바탕으로 절대/상대적인 위치에 포지셔닝 할 수 있다. [ Display 요소 ] 각 요소는 고유한 크기를 가질 수 있으나, inline 요소는 컨텐츠가 차지하는 크기로 고정된다. inline block 은 width와 height를 별도로 설정할 수 있다. - 한 줄을 다 차지하는 block ex) , , ... - 컨텐츠 공간만 차지하는 inline ex) , , ... - 높이 + 넓이를 제어할 수 있는 inline-block (span 태그에 css속성으로 display : inline-bl..
-
[코드스테이츠 TIL] CSS 선택자 : CLASS, IDStudy/HTML & CSS 2019. 11. 22. 21:53
[ CSS ] Cascading Style Sheets의 약자 웹 페이지 구성요소의 스타일을 정의하는 언어 CSS를 HTML에 적용하는 세가지 방법 1. inline HTML의 특정 태그에 직접 style을 적용 Hello world 2. HTML 내부에 stylesheet 작성 태그 이용하여 Hello world Contents here Here too! 3. HTML 외부에 stylesheet 작성 태그 이용 css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입 Hello world Contents here Here too! [ CSS SELECTOR ] CSS 선택자 : CSS에서 요소(element)를 선택하는 규칙 1. 각각의 ELEMENT에 고유한 ID를 부여 : #I..
-
[생활코딩] 5. CSS 선택자 & 선택자 우선순위Study/HTML & CSS 2019. 8. 7. 10:00
CSS 선택자 CSS에서 선택자는 디자인 스타일을 적용하고자 하는 HTML의 요소를 선택할 때 사용된다. CSS 선택자는 다양한 종류가 있는데, 어떠한 요소를 선택할 지 세밀하게 조절할 수 있다. 그리고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다는 특징이 있다. .saw { color:gray; } 1. class 선택자 ▶ .값 { } '그룹핑하다'라는 의미로 사용되는데, 광범위하게 처리하고 싶을 때 사용된다. 클래스 선택자는 비유하자면 고등학교의 특정한 반에 해당한다. 그리고 클래스 선택자에는 여러 개의 속성을 넣을 수 있다. ★동일한 선택자를 함께 기재했다면, 마지막에 기재한 선택자가 우선 순위이다. 따라서 위 사진을 보면, 2.html 링크 태그에서 saw와 activ..
-
[생활코딩] 4. CSS의 등장 & CSS의 문법Study/HTML & CSS 2019. 8. 6. 10:00
CSS의 등장 초기 HTML은 오직 검은색 글자로만 나열되었다. 그래서 사람들은 글씨 색을 바꾸는 등의 더 다양한 기능들을 원했고, HTML에 디자인 가능한 코드를 추가했다. 하지만 이는 웹의 가치를 퇴보시키고 근본적인 문제를 해결하지 못했다. 그리고 아예 새로운 언어를 만들기 시작했고, 그것이 CSS 이다. 특정한 태그를 대상으로 CSS를 통해 디자인하고 싶을 때는 이렇게 작성하는 것은 웹브라우저에게 " ~를 CSS 언어로 해석해서 처리해라 " 라고 전달해주는 것이다. 그리고 CSS는 HTML보다 더 효율적으로 디자인 기능을 하도록 되어있다. [예시] Xiubin world one two three a 태그가 걸린 곳에 기존 HTML 문법을 사용할 경우 모든 a태그 위에 ~ 태그를 넣어줘야 디자..
-
[생활코딩] 3. 웹의 역사 & 웹호스팅 & 웹서버Study/HTML & CSS 2019. 8. 5. 10:00
이번 강의에서 들은 내용은 굉장히 흥미로웠다. 웹의 탄생 비화에 대해서 처음 알게 됐고, 웹을 이루고 있는 구조가 어떠한지 파악하게 됐다. 생활코딩의 egoing님은 정말 알아듣기 쉽게 설명해주셔서 강의 내용이 쏙쏙 들어온다. "우리도 컴퓨터,인터넷,웹과 같이 혁명적인 것을 만들어야하죠. 그러기 위해서는 이 혁명이 어떻게 시작되고 지속되고 소멸되는가에 대한 맥락을 알 필요가 있습니다." [ 인터넷과 웹 ] 인터넷이 도시라면 웹은 도시 위에 있는 건물 하나이다. 즉, 웹은 인터넷의 부분집합에 해당한다. 인터넷 Internet : 컴퓨터로 연결하여 TCI / IP라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크. 월드 와이드 웹 World Wide Web : 인터넷에 연결된 컴퓨터들..