Torch for new way

CSS로 스타일링을 진행할 때, 일괄적으로 모든 요소들을 동일하게 스타일링하는 경우보다 우리가 원하는 특정 요소만 선택해서 그 요소만을 스타일링 하고 싶은 경우가 많을 것이다. 이 때, css에게 어떤 요소를 스타일링하고 싶은지 구체적으로 특정해주고 싶을 때 사용하는 것이 바로 선택자(selector)이다. 이 장에서는 class 선택자, ID 선택자, 유사 class 등 특정 요소를 선택해 스타일링하는 방법을 알아볼 것이다. 5.1 Set up 다음과 같이 html, css를 생성해주자. CSS selector CSS 선택자는 개별 html 요소들을 선택할 수 있게 만들어준다. 이 선택자는 웹 페이지의 어떤 box도 선택할 수 있게 해준다는 점에 매우 유용하다. 시간이 되면 Interneting Is ..

CSS box model이란 인터넷 웹 사이트가 어떻게 렌더링 될 것인지를 결정하는 규칙의 집합이라고 볼 수 있다. 여기서부터 좀 본격적인 페이지의 layout을 배운다. CSS는 HTML 문서의 각 element들을 각각 다른 성질을 가진 box로 취급해 페이지 어디에 나타날 것인지를 결정한다. Ch 03까지는 단순히 하나 뒤에 하나, 하나 뒤에 하나를 쭉 늘어놓는 방식이었지만 이젠 그러지 말고 정말 우리가 접속하는 웹 페이지처럼 그럴싸한 모양이 나도록 웹 페이지를 구성해보자. 이제 padding, border block, line 등 CSS Box model의 기본적인 개념부터 공부해보자. 4-1 Set up 다음과 같이 html 문서를 작성해보자. Headings (h1, h2... h6) 는 bl..

이제 HTML을 꾸미는 도구인 CSS를 사용하는 법을 알아보자. 이번 장에서는 CSS의 문법과 그걸 어떻게 html 파일이 인식하도록 연결하는 지에 대해 알아보자. CSS는 별도의 파일로 존재하므로 폴더의 조직을 신경쓰면서 해보자. // hello-css.html Hello, CSS CSS는 우리가 html element들을 스타일링 할 수 있도록 해준다. 다른 예시도 준비되어 있다. List Styles 꾸며줄 리스트들 disc circle square 숫자를 붙여줄 리스트들 demical lower-roman upper-roman lower-alpha upper-alpha 기타 등등 여기에 추가로 복수의 웹 페이지 집합에서 CSS가 어떻게 작동하는지 알아보기 위해 간단한 html 문서를 하나 더 만들..

link나 image는 하나의 웹 페이지에서 벗어나 외부 리소스를 가져온다는 점에서 차이를 보인다. link는 한 페이지에서 다른 페이지로 사용자를 이동시켜주며, image는 다른 리소스를 페이지 내부로 가져온다. 이 둘을 사용하기 위해서는 attribute라는 다른 html syntax가 필요하다. 이번에는 몇 개의 html문서와 이미지 파일을 포함한 하나의 웹 사이트를 만들어볼 것이다. 본질은 복수의 파일과 폴더의 조직화에 있다는 것을 잊지 않게 주의하면서 시작해보자. 2.1. Naming Conventions 지금까지 만든 폴더나 파일은 이름에 white space가 하나도 없다. 앞으로도 거의 없을 것이다. 이를 추가하려면 추가적인 처리가 필요해 보통은 이름에 띄어쓰기가 들어가지 않도록 한다. 2..

몇 개의 챕터로 이루어진 HTML, CSS의 초보적인 튜토리얼이다. 웹 페이지를 만든다고 생각하고 공부해보자. 1.1. HTML, CSS, Javascript HyperText Markup Language (HTML), Cascading Style Sheets(CSS), JavaScript는 web을 동작시키는 언어다. 서로가 매우 밀접한 연관이 있지만 각각 특정 목적을 위해 디자인 되어있다. 1. HTML은 정제되지 않은 내용을 마킹해 뜻을 더한다. 2. CSS는 마킹된 내용물을 formatting한다. 3. Javascript는 내용물과 formatting을 상호작용하게 한다. HTML은 웹 페이지 무대 뒤의 텍스트나 이미지, CSS는 실제로 보여지는 페이지, JS는 그 둘을 조작하는 툴이라고 일단은..