CSS 선택자(class, id선택자)
·
HTML, CSS
중복을 줄이기 위하여, CSS의 특징인 class를 이용할 수 있다. 웹페이지에 있는 모든 태그 중에서, saw라는 class 값을 가지고 있는 태그들을 하나로 묶어서 원하는 속성(property)를 부여할 수 있다. 이렇게 class에 태그를 추가하면 css에서 선택자 .@@@{ }를 통해 "class 값이 '@@@'인 태그"를 묶을 수 있다. (@@@는 class의 태그 이름 예시) 이렇게 묶은 태그들에 속성을 부여하여 사용할 수 있다. ... WEB I AM TEXT 위와 한번에 여러개의 class 선택자를 이용할 경우 태그에 가까운 선택자(active)가 더 우선적으로 적용된다. 또한, 태그선택자에 대하여 class 선택자가 우선한다. => I AM TEXT 가 gray로 표시된다. (1. cla..
[CSS] CSS 기본문법
·
HTML, CSS
html과 css가 완전히 다른 언어이기 때문에, 웹페이지에 css를 포함시키기 위해서는 웹브라우저로하여금 어디서부터 어디까지가 css인지를 알게 해줘야 한다. 즉, css의 범위를 표시해주어야 한다. 첫번째는 tag를 이용하여 css의 범위를 표시하는 방법으로 style 속성: 반드시 그 값으로 css의 속성이 들어온다. 위와 같이 style태그가 직접 위치하는 경우, style태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에 선택자를 사용할 필요가 없다. 두번째는 속성을 이용하는 방법이다. style 태그: 속성만 있어서는 해당 효과를 누구에게 지정할지를 설명할 수가 없기 때문에, a{ } 코드를 추가하여 효과를 누구에게 적용시킬 것인지 지정해준다. => 선택자(selector)라고 부른다. 선..
[HTML] 웹서버 운영하기
·
HTML, CSS
index.html 파일에 접속할 수 있는 두가지 주소가 있는데, file://Desktop/web/index.html 은 웹브라우저에서 '파일 열기'를 통해 index.html 파일을 연것이다. (웹페이지를 직접 연것) https://127.0.0.1:8887/index.html 은 같은 웹브라우저가 컴퓨터에 설치되어있는 웹서버에 접속한뒤, 웹서버가 index.html을 읽어서 웹브라우저에게 돌려주었다는 것 두개의 주소는 사용자에게 index.html 을 보여준다는 점에서는 같지만, 두 페이지는 질적으로 완전히 다르다. 웹브라우저와 웹서버가 동시에 설치되어있는 컴퓨터의 경우에는 'file://Desktop/web/index.html' 방식을 사용하여도 상관없지만, 두 개의 컴퓨터가 웹페이지를 주고받기 ..
[HTML] 인터넷과 웹, 웹호스팅
·
HTML, CSS
1. 인터넷과 웹 인터넷이 동작하기 위해서는 최소한 두대의 컴퓨터가 필요하다. 첫번째 컴퓨터에는 WebServer가 설치되어 있고, https://info.cern.ch라는 주소를 가지고 있다. 해당 컴퓨터의 하드디스크에는 index.html 이라고하는 파일이 저장되어있다. 두번째 컴퓨터에는 WebBrowser가 설치되어 있고, https://info.cern.ch/index.html 의 주소를 검색하면 전기적인 신호를 통해 info.cern.ch 주소를 갖고있는 컴퓨터에 신호(index.html 파일을 원한다는 신호)를 보낸다. info.cern.ch 주소를 가진 컴퓨터는 하드디스크에서 index.html 파일을 찾고, 해당 파일의 정보를 전기적 신호로 변환하여 웹브라우저가 설치되어있는 컴퓨터에 전송해..
[HTML] HTML 기본 문법 정리
·
HTML, CSS
HTML(Hyper Text Markup Language)는 웹을 이루는 가장 기초적인 구성 요소이다. html은 markup language로, programming language가 아니다. 1. HTML의 구성요소 태그(tag) 여는 태그 = "" 닫는 태그 = "" 속성(attribute) : 태그가 태그의 이름만으로는 정보가 부족할 때, 속성을 통해 더 많은 의미를 부가할 수 있다. 속성은 순서와 관계없이 사용가능하다. "속성 이름" + "=" + "속성 값(value)" , 속성은 순서 상관없이 사용가능하다. 내용(content) : 그냥 text 요소(element) : 여는 태그 + 내용 + 닫는 태그 단, attribute는 다음을 항상 지켜야 한다. 1. 요소 이름 또는 이전 attri..