본문 바로가기

CSS

HTML+CSS 기초 강의 - 21. 폼만들기 기초 10 - 회원가입폼 만들기

0 2018. 12. 21. 로그인폼을 앞서 만들어 봤으므로 회원 가입폼 정도는 쉽게 만들 수 있습니다. 폼 요소의 갯수가 많고, 조금 더 다양한 폼 요소를 사용하는 차이 정도가 있습니다. 먼저 완성된 폼 소스를 보고 어떤 폼을 만들게 될지 확인 해보겠습니다. 아이디 패스워드 패스워드확인 이름 닉네임 이메일 @ 이메일수신 수신 미수신 SMS수신 수신 미수신 연락처 010 011 017 018 019 - - 취미 독서 낚시 수영 성별 남자 여자 프로필사진 실제 제작했었던 쇼핑몰 회원가입폼을 중목되는 폼 요소들을 모두 삭제하고, 레이아웃에 관련된 태그와 CSS를 모두 걷어내서 기본 폼 구조만 남긴 소스입니다. 태그쌍들은 폼을 줄단위로 정렬하기 위해 최소한의 CSS를 사용해 라벨과 폼 요소가 쌍으로 배치가 될 수 있도록 하는 역할만을 합..

HTML+CSS 기초 강의 - 22. CSS 기초이해 1 - CSS 위치

0 2018. 12. 21. HTML 태그를 사용해 HTML 문서를 작성한 후 웹브라우저에서 열면 태그를 사용해 입력한 내용과 이미지, 양식 등이 한줄에 한개씩 세로로 주욱 나오는 것을 보게 됩니다. 내용은 있지만 띄어쓰기와 줄 사이에 공백을 주는 것 말고는 HTML 문서를 보기좋게 만드는 그 어떤 것도 할 수 없습니다. HTML 태그는 문서 안에 위치한 태그 순서에 따라 태그의 내용을 화면에 표시할 뿐입니다. 여기서 CSS가 빛을 발하게 됩니다. MS워드나 아래한글에서 문서를 예쁘게 보이도록 하기 위해 사용하는 수많은 기능들의 역할을 하는 것이 바로 CSS 입니다. CSS는 Cascading Style Sheet의 첫 철자를 따서 만들어진 단어입니다. 한글로 직역을 한다면 연속되는 모양을 정의한 문서 정도인데, 그보다는 적층식으로..

HTML+CSS 기초 강의 - 23. CSS 기초이해 2 - CSS 작성 순서

3 2018. 12. 21. 대부분 CSS 클래스를 정의한다고 하면 CSS 를 정의하는 기본 문법만 주구장창 배우게 됩니다. 시방 뭣이 중헌디... 실전 프로젝트에서 클래스를 정의하는데 있어서 가장 중요한 것은 CSS를 정의하는 문법이 아닙니다. 문법같은거야 쓰다보면 자연스럽게 외워지기도 하고 익숙해집니다. CSS 작성을 아무리 많이 해도 결국은 사용하던 것만 사용하게 되기 때문에 잘 사용하지 않거나, 복잡한 CSS 속성들은 어차피 레퍼런스 사이트에서 규격을 확인하지 않으면 제대로 작성하기 힘듭니다. 그것보다도 100배쯤은 중요한 것이 CSS를 작성하는 기본 순서입니다. HTML 문서 앞에서 나오는 내용부터 주욱 클래스를 정의해나가다보면 중복에 중복에 중복을 거쳐서 클래스가 꼬이기 시작합니다. 앞에 정의했던 클래스 속성을 뒤에 나오..

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) 또는, 테두리라고 하고 보더에 선을 긋거나 다양한 선 속성을 부여할 수 있습니다. 여백 기준을 그림으로 그리면 다음과 같습니다. 이 그림을 기준으로 패딩, 마진, 보더(테두리)를 설명합니다. 예를 들어..

이전 1 2 3 4 다음

닫기

티스토리툴바