HTML 태그를 이용하여 웹 사이트의 구조를 만들었다면, 그 이후는 CSS(Casading Style Sheets)를 활용하여 시각적인 효과를 만들어 낼 수습니다.
나는 CSS는 가장 쉬운 문법을 가진 언이이면서, 가장 활용하기 어려운 언어라고 생각합니다.
웹 디자인을 하는데 있어서 단순히 시각적으로 화려한 것이 아닌 사용자가 사용하기 편리하고 흥미를 가질수 있도록 웹 페이지를 구성한다는 것은 단순히 기술적으로 해결할 수 있는 부분은 아니기 때문입니다.
따라서, 사용자와 좋은 상호작용하는 웹페이지를 만들기 위해서는 UI와 UX를 고려한 웹 디자인이 이루어 져야합니다.
사용자 인터페이스(UI; User Interface)
사용자 인터페이스는 사용자와 애플리케이션간의 소통을 위한 규칙이라 할 수 있습니다. 웹 페이지에서 사용자가 로그인, 설정 변경 등 사용자가 어떠한 기능을 사용하기 쉽게 하기위해 버튼을 배치하여 이를 통해 사용자는 컴퓨터와 상호작용이 가능합니다. 이러한 UI가 없다면, 컴퓨터 언어를 사용하지 못하는 사용자는 서비스를 이용하지 못하는 상황이 발생하게 될 것 입니다.
좋은 프론트 엔드 개발자가 되기 위해서는 직관적이고 쉬운 UI제작을 통하여 사용자와 원할하게 소통할 수 있는 능력이 필요합니다.
사용자 경험(UX; User experience)
사용자 경험은 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 의미합니다. 우리는 따라 설명하지 않아도 동영상이나 음악을 재생하기 위해서는 ' ▶ ' 버튼을 눌려야하고 일시 정지를 위해서는 ' || ' 버튼을 눌려야하는 것을 알 듯이 사용자 경험을 바탕으로 사용성을 높이는 노력이 필요합니다.
CSS(Casading Style Sheet)
CSS 문법
CSS는 선택 자와 선언블록으로 이루어져 있으며, 블록 내부에 속성 값을 설정하여 선택자의 디자인을 변경이 하게 됩니다.
선택자(Selector)의 종류
1. 전체 선택자
전체 선택자는 모든 요소에 스타일을 적용할 때 사용합니다.
* { margin : 10px; // 모든 요소의 margin값이 10px
background-color : black; // 모든 요소의 배경색은 검은색
}2. 태그 선택자
태그 선택자는 특정 HTML 태그에 스타일을 적용할 때 사용합니다.
p { color : blue; // p 태그의 폰트 색깔이 파란색
font-size : 15px;// p 태그의 폰트 사이트 15px
}
3 클래스 선택자
클래스 선택자는 특정한 클래스의 스타일을 적용할 때 사용하며, 클래스명 앞에 ' . ' 을 붙여 줍니다.
.classname {
color : blue; // p 태그의 폰트 색깔이 파란색
font-size : 15px;// p 태그의 폰트 사이트 15px
}4. ID 선택자
클래스 선택자는 특정한 ID의 스타일을 적용할 때 사용하며, 클래스명 앞에 ' # ' 을 붙여 줍니다.
#IDname {
color : blue; // p 태그의 폰트 색깔이 파란색
font-size : 15px;// p 태그의 폰트 사이트 15px
}
### 5. 복합선택자
복합 선택자는 두개 이상의 선택자 요소가 모인 선택자입니다.
#### • 후손 선택자
```css
body p { } // body 요소 자식 요소 중 p태그 선택
<body>
<p> <!-- 선택된 <p> 요소-->
<div>
<p> <!-- 선택된 <p> 요소-->
</p>
</div>
</p>
<p> <!-- 선택된 <p> 요소-->
<div>
<p> <!-- 선택된 <p> 요소-->
</p>
</div>
</p>
</body>• 자식 선택자
body > p { } // body 요소 바로 아래의 자식 <p> 요소 선택 <body>
<p> <!-- 선택된 <p> 요소-->
<div>
<p></p>
</div>
</p>
<p> <!-- 선택된 <p> 요소-->
<div>
<p></p>
</div>
</p>
</body>• 형제 선택자
div ~ p { } /* <div> 요소 바로 아래의 자식 <p> 요소 선택*/• 인접 형제 선택자
div > p { } /* <body> 요소 바로 아래의 자식 <p> 요소 선택*/6. 속성 선택자
a[href] { } /* 속성 값이 href인 <a>요소 선택*/
p[id="abc"] { } /* id 속성값이 "abc"인 <p> 요소 선택*/7. 가상 클래스 선택자
a:link { } /* 사용자가 방문하지 않은 <a>요소 선택*/
a:visited { } /*사용자가 방문한 <a>요소를 선택 */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택 */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택 */
a:focus { } /* 포커스가 들어와 있을 때 선택 */8. 구조적 가상 클래스 선택자
p:first-child { } /* <p> 요소 중에서 첫번째 자식 요소 선택*/
li:last-child { } /* <li> 요소 중에서 마지막 자식 요소 선택*/
div > div:nth-child(4) { } /* <div> 요소 자식 중에서 4번째 자식인 <div> 요소 선택*/
div:nth-last-child(2) { } /* 형제 중 뒤에서 두번째 자식인 <div> 요소 선택 */
section > p:nth-last-child(2n + 1) { } /* section 자식 중 홀수번째 자식인 <p> 요소 선택 */
p:first-of-type { } /* <p> 요소 형제 중 첫 번째 <p> 요소 선택*/
div:last-of-type { } /* <div> 요소 형재 중 마지막 <div> 요소 선택 */
ul:nth-of-type(2) { } /* <ul> 요소 형제 중 2번째 <ul> 요소 선택 */
p:nth-last-of-type(1) { /* <p>요소 형제 중에서 뒤에서 1번째 <p> 요소 선택 */9. 그 외 선택자
* 부정 선택자
input:not([type="text"]) { } /* 속성이 'text'가 아닌 <input> 요소선택 */
div:not(:nth-of-type(2)) { } /* <div> 앨리먼트 형제 중 2번째가 아닌 <div> 요소 선택 */* UI요소 상태 선택자
input:checked + span { } /*체크 상태일 때 선택 */
input:enabled + span { } /*사용 가능한 상태일 때 선택 */
input:disabled + span { } /*사용 불가능한 상태일 때 선택 */* 가상 엘리먼트 선택자
input[type="text"]:valid { }
input[type="text"]:invalid { }reference : 넥스트리소프트(https://www.nextree.co.kr/p8468/)
