본문 바로가기

생활코딩 HTML + CSS + 자바스크립트/CSS 이론6

08 박스 모델 1. 위와 같이 작성했을 때, 웹 브라우저 에서, 아래와 같이 보여지게 된다. 보면, CSS는 태그에 둘러쌓여 있는데, 태그는 화면 전체를 사용 하고 있다. 왜그럴까 ? 줄바꿈이 되어서 그렇다. 그런데, 태그에 둘러쌓여 있는 CSS는 줄바꿈이 되지 않고, 다른 컨텐츠와 함께 같은 라인에 위치 하고 있다. 같은 태그 언어인데 왜 이런 차이가 발생할까 ? 이유는, 태그의 사용 목적에 따른 이유 이다. 사용 목적에 따라서, 각각의 태그들은 기능이 다르게 태어났다. 태그는 제목 태그중 하나 이다. 제목 태그는 화면 전체를 사용하는 것이 더 편리하기 때문에 줄바꿈이 되는 것이다. 근데 태그는 링크 태그 이다. 링크 태그가 화면 전체를 사용한다면 어떨까 ? 불편하다. 링크 앞뒤로 컨텐츠가 줄바꿈이 되면 어색 하지 .. 2023. 7. 1.
07 CSS 선택자의 기본 1. CSS에서 중요한 2가지 개념이 있다. 1) 효과 2) 선택자 이다. 이전 게시글에서, 효과에 대해서 다뤘고, 이번 게시글에서는, 선택자 이다. 2. 모든 링크는 기본적으로 검은색으로 표현 하고, 사용자가 한번이라도 방문했으면, 각 글들의 링크 색은 회색으로 표현 하고, 현재 페이지의 링크는 빨간색으로 표현 하려고 한다. 지금 까지 배운 바로는 style 이라는 인라인 속성을 통해서 이를 처리 했다. 하지만, style = "color : gray;" 를 두번이나 반복했는데, 중복이 발생한 것이다. 3. 중복을 없애 보기. test 라는 속성값을 가지고 있는 class 속성을 사용해보자. 그리고, 선택자를 통해서 색 효과를 줘보자 ! 엥 ? 색이 변경되지 않은 모습 이다. 왜 그럴까 ? 이유는, 다.. 2023. 7. 1.
05 혁명적 변화 ~ 06 CSS 속성을 스스로 알아내기 04장에서, 웹 페이지에 CSS를 삽입하는 방법을 알아봤다. 1. [ CSS 문법 ] 와 같이 있다면, a는 선택자를 의미 한다. (Selector) >> 이 웹 페이지의 모든 a태그를 선택한다는 의미로 선택자라고 한다. color : blue; 는 선언 했다. 라고 말할 수 있다. 또는 효과라고도 한다. (번역의 차이.. 표현법의 차이. 중요하지 않음) (Declaration) >> 선택자가 지정한 태그에 대해 어떤 효과를 줄 것인가를 보여주는 부분을 선언 했다 라고 한다. color는 속성이다. (Property) >> color 속성을 의미한다. 속성은 굉장히 다양 하게 존재 한다. red는 값이다. 속성값이라고 할 수 있다. (Value) >> 속성에 대한 값을 속성값 이라고 한다. == 프로퍼티.. 2023. 6. 25.
04 CSS의 기본 문법 CSS >> Cascading Style Sheet (종속형 시트) (캐스케이딩 스타일 시트) 1. 03장에서 말했듯이, HTML과 CSS는 완전히 다른 언어이므로, 웹 페이지에 CSS를 포함시킬 때는 웹 브라우저로 하여금 어디서부터 어디까지가 CSS 인지를 알려줘야 한다. 2. 태그가 그런 역할을 한다. 다른 방법으로는 태그를 통하는 것이 아니라, 속성을 이용하는 방법 이다. 3. 위와 같은 코드로는 웹 브라우저 입장에서, color:blue 부분이 HTML인지 ? CSS인지 알 수 없다. 그래서, HTML과 CSS를 만든 사람들은, 위 태그에 대해 CSS 효과를 주고 싶으면 style 이라는 속성을 사용하기로 약속 했다. style = "color:blue" 를 하게되면, 페이지의 CSS 라는 글자가.. 2023. 6. 25.
03 CSS의 등장 0. 웹을 만든 사람들은 웹 페이지를 아름답게 만드는 방법에 대한 깊은 고민에 빠진다. 두가지 갈림길에 서게 된다. 1) 쉽지만 한계가 있는 방법. 2) 어렵지만 근본적인 해결책인 방법. 이미 존재하는 언어였던 HTML 언어에 디자인과 관련된 새로운 태그를 추가해서 사용 하는것이 1) 이다. 디자인에 최적화된 완전히 새로운 언어를 만드는 것이 2) 이다. 처음에는 1)을 선택해서 사용하다가, 한계를 깨닫고 어렵지만 근본적인 해결책을 결국 찾게 된다. 그게 바로 CSS 이다. 1. 웹 브라우저가 처음 나왔을 때 웹 브라우저는 HTML 언어만 해석해서 처리하는 프로그램 이였다. 따라서, 웹 브라우저는 기본적으로 코드를 HTML 이라고 생각 한다. CSS는 HTML과는 완전히 다른 컴퓨터 언어 이다. 그래서,.. 2023. 6. 25.
01 수업 소개 ~ 02 CSS가 등장하기 전의 상황 1. 웹이 처음 세상에 등장했을 때, 단 하나의 기술만이 존재했다. == HTML. HTML을 이용하면, 전자문서를 만들 수 있었다. 즉, 컴퓨터를 통해 정보를 표현할 수 있게 됬다. 이 정보를 인터넷을 통해 전 세계의 누구나 볼 수 있게 할 수 있게되서, 당시로서는 혁명적인 사건이였다. 자연스럽게 사람들은 웹에 열광했다. 하지만, 사람의 욕심은 끝이 없어서, 처음에는 HTML을 이용해 문서를 만들 수 있게 된 것으로도 행복했지만, 곧 여러가지 불평들이 나오게 됬다. 2. 수많은 불평들 중, 아름다우면서 보기 좋은 형태로 만드는 방법에 대한 부분을 정리 하겠다. CSS가 왜 등장할 수 밖에 없었는지를 위의 글로 알 수 있게 되었다. 3. 문서의 글꼴을 변경 하고 싶어. 문자의 크기를 변경 하고 싶어. 문.. 2023. 6. 20.

티스토리툴바