본문 바로가기

분류 전체보기

 (239)
[HTML/CSS] #7.선택자 (tag, class, id) CSS에는 3가지 종류의 선택자가 있다. tag 선택자 class 선택자 id 선택자 이들 선택자의 쓰임은 다음과 같이 사용한다. 채소 나의 현재 나의 미래 앞으로 해야할 일 tag 선택자는 다음과 같이 쓰였다. a { color: black; text-decoration: none; } class 선택자는 다음과 같이 쓰였다. .saw { color: green; } 마지막으로 id 선택자는 다음과 같이 쓰였다. #active { color: red; } 차이점이 보이는가? tag 선택자는 다른 기호없이 그냥 써주면 되고 class 선택자는 앞에 .(comma)를, id선택자는 #(hash)를 붙여주면 된다. 그렇다면 위 코드로 CSS를 적용하면 리스트의 글자색은 각각 어떻게 변해있을까? 한번 생각해보..
[HTML/CSS] #6.CSS 기본 문법 웹페이지에 CSS를 넣는 방법이 2가지 있다. style 태그를 사용하는 방법 style 속성을 사용하는 방법 다음의 코드를 보자. 채소 나의 현재 나의 미래 앞으로 해야할 일 보다시피 style 태그를 head 태그의 자식 태그로 사용하는 경우와 특정 태그의 속성으로 사용하는 방법이 있다. CSS는 위에서부터 아래로 적용되므로 결과를 보면 다음과 같다. 앞서 배운 CSS의 용어를 정리해보자. style 태그 안의 특정 태그는 선택자(Selector)라고 한다. 여기서는 웹페이지에 있는 모든 a 태그를 '선택'한다는 의미에서 선택자 인 것이다. 이 태그에 어떤 효과를 줄 것인지 선언하는 부분을 선언(Declaration)이라고 한다. 선언에는 속성(Property)과 값(Value)이 있다.
[HTML/CSS] #5.링크 웹페이지를 만들다 보면, 특정 문구에 링크를 걸고 싶은 상황이 있을 것이다. 이 때 사용하는 태그가 바로 a태그이다. 다음의 코드를 보자. click me! 여기서 a는 anchor의 약자이고 href는 HyperText Reference의 약자로, 링크를 걸어줄 때 사용한다. target="_blank" 는 링크를 클릭했을 때 새 창에서 열리도록 하는 속성이다. title은 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능이다. (링크에 마우스를 갖다대면 보일 것이다.)
[HTML/CSS] #4.목록 태그 HTML에는 목록을 나타내고 싶을 때 쓸 수 있는 태그가 몇가지 있다. 바로 li태그와 ul, ol태그이다. 이들은 다음과 같은 형식에 맞춰 사용한다. HTML CSS JavaScript vegetable cream sugar 보다시피 ol & ul태그는 부모 태그, li태그는 자식 태그로 들어간다. 따라서 ol & ul태그와 li태그는 아주 밀접한 관계이며 둘 중 하나라도 빠진다면 존재 가치가 없어진다. 결과는 다음과 같다.
[HTML/CSS] #3.속성과 img 우리는 지금까지 태그라는 것을 배워보았는데, 이 태그만으로는 정보가 부족할 수 있다. 그래서 '속성(attribute)' 이라는 문법을 도입하게 되는데, 다음의 코드를 보자. 보다시피 img태그에 src라는 속성을 사용해서 어떤 이미지를 넣을지 정보의 표현이 가능해졌다. 속성은 꼭 한개만 쓸 수 있는게 아니다. 여러개를 써도 상관없다. 다음의 코드를 보면 width라는 속성을 추가해 이미지의 크기를 임의로 조절할 수 있도록 만들었다. 이와 같이 속성은 부족한 정보의 표현을 가능하게 해준다!
[HTML/CSS] #2.줄바꿈 HTML에서 줄바꿈과 관련된 태그는 두가지가 있다. 바로 br태그와 p태그이다. 그렇다면 둘의 차이는 무엇인가? 다음의 코드를 보자. The br HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. The p HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/o..
[HTML/CSS] #1.기본 태그 오늘날의 HTML은 150개가 넘는 태그가 존재한다. 이를 모두 암기하기에는 벅찬 일이다. 따라서, HTML에서 기본적으로 자주 쓰는 몇가지 태그만 머릿속에 집어넣고 나머지는 그때그때 필요에 따라 검색을 하며 공부하도록 하자. (검색 사이트 추천: https://developer.mozilla.org/ko/docs/Web/HTML/Element/) HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org 그렇다면 HTML에서 자주 쓰는 태그는 무엇일까. 다음의 사이트에서 이를 통계로 분석해놓았다. https://www.advancedwebrankin..

티스토리툴바