우리는 책을 읽거나 웹툰을 볼 때 '좌에서 우','위에서 아래'로 보는 것이 자연스럽습니다. 이처럼 누가 가르쳐주지 않아도 자연스럽게 다양한 컨텐츠를 읽을 수 있는 이유는 우리가 이러한 환경이 익숙하기 때문입니다. CSS는 사용자와 애플리케이션이 상호작용 할 수 있도록 시각적 도움을 주는 역할을 수행합니다. 따라서 화면 레이아웃을 구상 할 때, '좌에서 우','위에서 아래'의 흐름으로 컨텐츠를 제작하는 것이 유저 경험 (UX: User Experience)적인 측면에서 좋습니다. 레이아웃을 설정 할 때는 기본적으로 '수직분할'과, '수평분할'을 적용하는데요, 수직분할: 화면을 수직으로 구분하는 것을 뜻합니다. (컨텐츠가 가로로 배치됩니다.) 수평분할: 요소를 수평으로 구분하는 것을 뜻합니다. (컨텐츠가 ..
HTML문서에서는 , , 등 여러 요소가 공존한다. 그렇다면 같은 내가 바꾸고 싶은 요소만 색을 바꾸려면 어떻게 해야할까? id로 이름붙여서 스타일 적용하기 요소는 하나의 태그이기 때문에 다음과 같이 태그를 선택해 색상을 변경할 수 있다. h2 { color: yellow; } 어때요. 정말 쉽~죠?! 그러나 만약 다음과 같이 h2의 영역이 중복적으로 활용되는 코드에서 특정 영역만 색상을 변경하기 위해서는 id를 설정하여 해결할 수 있다. id는 하나의 문서에서 한 요소에만 사용이 가능하며 그 내용을 다음과 같다. special #special { color: blue; } 결과는 다음과 같다. class로 스타일을 분류하여 적용하기 id와 유사하게 특정 요소에 class를 지정하는 방법도 있다. 만약 ..
HTML과 CSS가 서로 연동되야 내가 작성한 내용과 스타일을 화면에서 확인 할 수 있다. 그렇다면 어떻게 두 언어를 연동할 수 있을까? HTML과 CSS의 링크 우선 HTML의 파일명과 확장자가 index.html, CSS의 파일명과 확장자가 index.css라고 가정 할 때 index.html에 다음과 같은 코드를 입력한다. 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다. 태그의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다. href에는 파일의 위치를 작성한다. (작성한 두 파일은 하나의 폴더에 함께 놓아야 한다.) 다른 경로에 있는 경우 경로를 입력하여 파일을 찾아야 한다. HTML에 CSS스타일을 적용하는 3가지 방법. 인라인 스타일 : 같은 줄에서 스타일을 적용 내부..
CSS의 역할 앞선 HTML에 대해서 설명할 때 HTML 구조를 잡아주는 역할을 하게된다고 배웠다. 반면, CSS는 HTML의 구조에 스타일과 레이아웃을 정해주는 역할을 한다. CSS는 다른 말로 스타일시트 언어라고 한다. HTML로만 구성된 화면은 유저 친화적이지도 않고 어떠한 기능도 구현되지 않는다. 즉, 우리는 CSS를 통해 좀 더 스타일리쉬한 UX를 제공할 수 있다. 그렇다면 개발자는 CSS로 무엇을 만들 수 있을까? 사용자 인터페이스(User Interface)와 사용자 경험(User Exprience) 인터페이스는 사물과 사람이 물리적으로 연결될 수 있도록 만들어진 영역이다. 사용자 인터페이스는 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령 할 수 있도록 만든 인터페이스(interface)와 사..
