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