본문 바로가기
반응형

HTML&CSS

HTML+CSS 기초 강의 - 24. CSS 선택자 기초 1 - CSS 클래스 이름 규칙 0 2018. 12. 21. CSS를 정의하고 사용하는데 있어서 가장 중요한 부분입니다. CSS 선택자를 얼마나 잘 이해하고 사용하는지에 따라 CSS 작성 분량이 달라지고 HTML 문서가 렌더링되는 속도도 차이나게 됩니다. 기본적인 개념을 잘 이해해서 최적화된 CSS 작성을 할 수 있 클래스 이름 규칙 클래스 이름에는 영문 대소문자([a-zA-Z]), 그리고 숫자([0-9])만 사용 가능합니다. ISO10646 일부 문자도 사용할 수 있지만 사용하지 않는 것을 권장합니다. 실제로 거의 사용되지 않으며, 개인적으로는도 사용하지 말 것을 추천합니다. 하이픈(-), 언더스코어/언더바(_)를 사용할 수 있습니다. 숫자와 이중하이픈(--)은 첫글자로 올 수 없습니다. 이중하이픈은 CSS 예약어입니다. 숫자 뒤 하이픈으로 시작하는 이름도 사용..
HTML+CSS 기초 강의 - 25. CSS 선택자 기초 2 - 클래스와 가상클래스의 조합 0 2018. 12. 21. a, a:link, a:visited, a:hover 링크 태그()는 중요하기 때문에 따로 분리해서 CSS선택자를 설명합니다. 선택자 뒤에 콜론(:)으로 구분해 추가되는 단어를 가상 클래스라고 하며, 선택된 요소의 특정 상태를 가리키는데 사용됩니다. 예를 들어 a:hover 클래스 정의는 하이퍼링크 a 태그 위에 마우스 커서가 위치했을 때의 상태를 나타내는 것으로 hover는 이 상태를 가리키는 가상클래스 이름입니다. 태그/클래스:가상클래스(상태) 이런식으로 표기합니다. 링크 태그는 다른 태그들과 달리 전용으로 사용하는 하위 상태를 여러개 가지고 있습니다. a 와 a:link는 CSS 속성 정의할 때 같은 것으로 간주합니다. a:hover 는 링크 태그() 위로 마우스 커서를 위치했을 때의 상태를 나타냅..
HTML+CSS 기초 강의 - 26. CSS 선택자 기초 3 - 속성과 속성값 0 2018. 12. 21. 클래스/태그[속성] 클래스/태그에 해당 속성이 있는 경우 CSS 속성이 적용됩니다. 예를 들어 p[title]{color:#a00} 과 같이 title 속성이 있는 p 태그에만 색상을 주는 것으로 CSS를 정의했다면 문단1문단2문단3문단4 와 같은 섹션이 있다면 "문단2" 에만 컬러 속성이 적용됩니다. 더 중요한 사용법이 있습니다. html 규격에 없는 사용자 정의 속성을 사용해도 적용이 된다는 점입니다. p[specialitem]{color:#a00} 이렇게 specialitem 이라는 속성이 있는 p 태그에 색상을 주는 것으로 정의했다면 문단1문단2문단3문단4 과 같은 섹션에서는 문단2, 문단3 에 색상이 적용됩니다. 문단3에는 속성 값이 없지만 컬러가 적용되는 것은 속성이 있는지 여부만 판단하기 때..
HTML+CSS 기초 강의 - 27. CSS 선택자 기초 4 - 가상요소 0 2018. 12. 21. 강의 내용이 초보자에게는 조금 어렵습니다. 어려운 개념이고, 중급 과정 정도에서 배우게되면 좋을 내용이지만, 워낙 빈번하게 사용하기 때문에 이런 선택자를 사용한다는 것만이라도 알아야 해서 기초 과정에 살짝 끼워넣었습니다. 초보자는 이해 안되는 부분들은 읽고서 일단 넘어가기를 권합니다. 클래스/태그::before, 클래스/태그::after 요소 앞/뒤에 내용을 추가할 수 있는 가상요소(pseudo-element) 선택자입니다. 가상요소는 실제 존재하지 않지만 기존 요소 앞뒤에 요소가 있는것처럼 사용할 수 있는 요소입니다. 처음접하면 개념도 난해하고, 이런걸 왜쓰나 싶지만, 실무에서 고급 CSS 작성 기법으로 많이 사용합니다. 굉장히 유용한 CSS 선택자이므로 꼭 알아두어야 합니다. CSS2 표준에도 있었지..
HTML+CSS 기초 강의 - 28. CSS 선택자 기초 5 - 가상클래스 0 2018. 12. 21. 강의 내용이 초보자에게는 조금 어렵습니다. 어려운 개념이고, 중급 과정 정도에서 배우게되면 좋을 내용이지만, 워낙 빈번하게 사용하기 때문에 이런 선택자를 사용한다는 것만이라도 알아야 해서 기초 과정에 살짝 끼워넣었습니다. 초보자는 이해 안되는 부분들은 읽고서 일단 넘어가기를 권합니다. 클래스/태그:first-child, 클래스/태그:last-child 클래스/태그로 선택한 목록의 첫번째 요소, 또는 마지막 요소를 선택합니다. 예를들어 1 2 3 4 5 6 7 8 섹션에서 li:first-child 는 1, 6, 7 를 li:last-child 는 5, 6, 8 를 선택합니다. 클래스/태그:nth-child(n) n번째 오는 자식 요소가 클래스/태그이면 선택합니다. n번째(n-th)라는 용어에 주의해야 합..
HTML+CSS 기초 강의 - 29. CSS 속성 기초 1 - 텍스트 속성 1 2018. 12. 21. CSS는 HTML 태그에 적용하는 속성들을 모아서 하나의 이름으로 정의해놓은 것을 말합니다. 이렇게 정의한 이름을 클래스라고 합니다. 즉, CSS 클래스는 CSS속성의 묶음입니다. 클래스는 클래스, ID명으로 정의할 수도 있고, HTML 문서 안의 전체, 또는 특정 영역의 태그들에만 적용되도록 태그명으로 정의할 수도 있습니다. 클래스 속성은 클래스명 [, 클래스명2] { 클래스 속성이름1:속성값; 클래스 속성이름2:속성값; } 와 같은 형태로 작성합니다. 클래스명 뒤에 중괄호({})로 태그 속성(들)을 감싸고, 1개의 클래스 속성 뒤에는 세미콜론(;)을 붙여 속성 1개가 끝났음을 표시합니다. 맨끝에오는 클래스 속성의 세미콜론은 생략 가능합니다. 예를들어 .txt1{ font-size:1em; font-f..
HTML+CSS 기초 강의 - 30. CSS 속성 기초 2 - 여백과 테두리 속성 0 2018. 12. 21. 여백 속성 모든 HTML 요소는 HTML 문서 안에 차지하는 영역이 있고 영역의 끝 부분에 다른 요소와 맞닿는 경계가 있습니다. 그 경계와 HTML 요소 안의 컨텐츠 사이에 여백을 주거나, 경계로부터 다른 요소, 또는 부모 요소와의 사이에 여백을 줄 수 있습니다. 요소의 내부와 외부에 여백을 주는 2가지 방법중 내부 여백을 패딩(Padding)이라고 하고 테두리에서 다른 HTML 요소, 또는 부모 요소와의 사이에 주는 외부 여백을 마진(Margin) 이라고 합니다. HTML요소의 경계는 보더(Border) 또는, 테두리라고 하고 보더에 선을 긋거나 다양한 선 속성을 부여할 수 있습니다. 여백 기준을 그림으로 그리면 다음과 같습니다. 이 그림을 기준으로 패딩, 마진, 보더(테두리)를 설명합니다. 예를 들어..
HTML+CSS 기초 강의 - 31. CSS 속성 기초 3 - 요소의 크기와 영역 속성 0 2018. 12. 21. 요소의 너비와 높이 그리고 영역의 범위 패딩, 마진, 테두리 값을 주게 되면 HTML 요소가 차지하는 영역의 크기와 내부영역의 위치가 가변으로 변하게 됩니다. HTML 요소에 너비와 높이 값이 지정되어 있지만 이 값은 패딩, 마진, 테두리 값이 모두 0인 상태의 요소가 차지하는 영역의 크기를 말합니다. 아래처럼 태그에 마진, 패딩, 테두리 0 으로 크기를 정한 처음의 박스 영역에서 패딩, 테두리, 마진을 차례로 추가함에 따라 점점 차지하는 영역이 커지는 것을 알 수 있습니다. 예를 들어 너비 960px인 데스크톱 환경용 웹디자인을 한다고 가정하면 항상 패딩과 테두리선 너비를 미리 계산해서 HTML 요소의 너비값을 지정할 때 그만큼 차감을 해서 960px으로 맞춰줘야 합니다. * HTML 요소가 차지하는 ..
HTML+CSS 기초 강의 - 32. CSS 속성 기초 4 - 배경 속성 0 2018. 12. 21. 배경 속성 요소의 배경에 색상이나 이미지를 배치해 요소를 꾸밀 수 있습니다.배경으로 이미지를 배치하면 말그대로 배경이기 때문에 HTML 요소 안의 컨텐츠들은 이 배경 이미지 위에 표시됩니다.배경 이미지로 반투명 png 이미지도 사용할 수 있기 때문에, 중첩된 요소들에 여러개의 배경 이미지를 잘 사용하면 다양한 이미지 중첩 효과를 만들 수도 있습니다. 배경 속성값 지정하는 방법은 2가지로 나누어집니다. 하나는 background 속성을 사용해 여러가지 배경 속성을 나열해 압축형으로 표현하는 방법.예를들면 background: red url("bg_img.png") no-repeat fixed center; 이런식으로 여러가지 속성값을 나열식으로 하나로 표현합니다. 다른 하나는 각각의 속성 종류별로 별도의 ..
HTML+CSS 기초 강의 - 33. HTML5 에서 추가된 폼 요소 3 2018. 12. 21. 아직 많이 사용되고 있지는 않지만, 폼의 편의성 개선을 위해 2개의 폼 태그가 추가되었습니다. 실상은 있는지도 모르는... 그런 폼 태그입니다만, 는 편리한 기능이기 때문에 꼭 알아두길 추천합니다. 입력 필드와 드롭다운목록을 하나로 합친 요소입니다. 기본 상태는 입력필드이고 입력도 가능하지만, 필드가 포커스되면 드롭다운목록이 활성화되어 목록에서 항목을 선택할 수 있게 되는 조금은 신박한 입력필드입니다. 사용자가 드롭다운목록에서 아이템을 선택하면 입력 필드에 해당 목록 아이템 값이 자동으로 입력됩니다. 입력필드에 입력된 내용은 수정할 수 있으며 목록에 원하는 값이 없으면 새로운 내용을 입력할 수도 있습니다. 사용자에게 선택 가능한 값들을 예를 들어 목록으로 보여주고 선택하면 자동으로 입력까지 해주는 편리한..
반응형
닫기

티스토리툴바