Computer Science/html + css + js 5

CSS #2: 클래스, 박스모델, 그리드, 미디어 쿼리

CSS의 다양한 기능들을 더 알아보도록 하자. 클래스 선택자, ID 선택자 a와 h1 태그들은 html에 기본적으로 주어진 태그들이다. 하지만 .saw 같은 'class'는 우리가 직접 만들 수 있다. class와 태그를 구별하기 위해 . (dot)을 사용하기로 하자. 이런 방식으로 어떤 클래스인지를 적어주면, class 안에 decoration이 반영된다. 하지만, #active와 같이 id 선택자 또한 존재한다. ID 선택자는 각 선택자마다 한번만 사용하는 것을 원칙으로 하며, 가장 빠르고 정확하게 꾸밈을 주는 선택자이다. 그렇기에, 태그 내에서, 태그 선택자와 클래스 선택자가 동시에 쓰였을 때 클래스 선택자가 반영되고, 클래스 선택자와 ID 선택자가 동시에 쓰이면 ID 선택자가 반영된다. 만약 같은..

css #1: Selector, Declaration,Property

지난번에 HTML에 대해서 배웠던 내용을 정리해봤는데, 오늘은 CSS의 시작하면서 배운 내용을 정리해보려고 한다. 먼저 코드이다. Hwan's HTML world hello my name is Hwan Guten Tag, ich heisse Hwan Things We Are Going to Learn 1. HTML 2. CSS 3. JavaScript Ways of Saying Hello in Multiple Languages hi hola guten tag annyeong Google Here! What is 1+1? 우선적으로 CSS는 웹사이트를 꾸밀 때 사용하는 언어이다. 언어를 예쁘게 꾸미는 방법은 다양하다. 먼저, html 자체 기능을 사용하는 방법이다. html의 font 함수는 언어를 바꿀 ..

HTML 기본 함수 정리 <head, body, p...>

제대로 된 프로젝트를 만들기 위해서, HTML + CSS + JavaScript 공부를 하려고 한다. 먼저 내가 파일 안에 두가지 html로 만들어진 소스와 사진 한 장을 넣어놨다. Codes 각자 코드는 다음과 같다. Hwan's HTML world hello my name is Hwan Guten Tag, ich heisse Hwan Things We Are Going to Learn 1. HTML 2. CSS 3. JavaScript Ways of Saying Hello in Multiple Languages hi hola guten tag annyeong Google Here! What is 1+1? 1.html What is 1+1? 2.html 그리고 사진은 다음과 같다. html이란? 우리는..

html+css 2일차: 웹의 기본 내용

저번 시간에는 html에 쓰이는 기본적인 태그들에 대해서 공부했었다. 오늘은 html의 기초적인 내용과, 웹에 대한 기본적인 배경 내용에 대해 다루어 보겠다. 첫째로, 내가 연습한 코드를 공개하겠다. 2생활관 baby들 최환짱 최환 박준서 이원재 박지승 네이버 롤체하고싶다 이 코드를 보고 오늘 공부한 내용들에 대해서 정리해보겠다. 첫째로, title 사이에 페이지의 전체적인 내용을 나타내는 제목을 적었다. 그리고 h1 사이에 소제목을 적고, 밑에 '최환짱'을 클릭하면 다른 페이지로 이끌어주는 링크를 만들었다. ordered list를 만들었다. 밑에 있는 list의 디자인을 문을 이용해서 만들었다. 글자의 크기랑, 정렬과, 링크에 있는 밑줄을 없애기 위해 text-decoration을 none으로 설정했..

html 1일차: 드디어 첫 시작

아직까지 c, java, python, 어셈블리 정도만 해봤었는데, 드디어 내 의지로 배우는 첫 번째 언어라고 할 수 있는 html!을 해보려고 한다. '생활코딩! HTML+CSS+자바스크립트'라는 책 으로 시작을 해보려고 한다. 근데 문제는, 여기서는 atom을 에디터로 쓴다. 하지만 옆에 있는 동기가 visual studio code로 쓰는 걸 추천해서, 이걸로 우선 연습해보려고 한다. 근데 정말 쉽고 재미있는 것 같다! 기본적으로 visual studio에서 html 파일 만들기부터 시작한다. 바탕화면에 새로운 폴더을 만들고, 그 이후에 vs code 왼쪽 상단에 있는 '파일'을 누르고, 방금 만든 폴더를 '폴더 열기'를 통해 만들어주면 된다. 그리고 그 이후에, 탐색기에서 '새 파일'을 선택해주면..