3일만에 끝내는 HTML, CSS, JS 기초

CSS 가상-태그 CSS 가상-태그 (Pseudo-Elements) 는 태그의 특정 부분의 스타일을 지정할 때 사용됩니다. 예를 들면 다음과 같은 경우에 사용됩니다. 어떤 태그 내에서 첫번째 문자 또는 줄 만에 대해 스타일을 지정할 때 어떤 태그의 내용이 있으면 그 내용의 전 또는 후에 다른 내용을 삽입할 때 가상-태그 (pseudo-elements) 의 구문은 아래와 같습니다. selector::pseudo-element { property:value; } 위의 구문에서 콜론을 두개 사용하였는데, CSS3 에서 가상-태그 (pseudo-elements) 에는 콜론 하나 (:) 대신에 두개 (::) 를 사용하기 때문입니다. 이것은 W3C (World Wide Web Consortium) 에서 가상-클래스..

CSS 가상-클래스 방문한 적이 있거나, 마우스 올라가거나 클릭하면 텍스트의 색상이 바뀝니다. 마우스 올리거나 클릭하면 스타일이 바뀝니다. CSS 가상-클래스 는 태그의 특별한 상태를 정의하기 위해 사용됩니다. 예를 들면, 사용자 마우스가 태그위로 올라 갔을 때의 스타일 지정 링크에 대해 방문 했을 때와, 방문하지 않았을 때의 스타일의 차이 지정 커서가 포커스 (focus) 되었을 때의 태그의 스타일 지정 가상-클래스 (pseudo-classes) 의 구문은 아래와 같이 씁니다. selector:pseudo-class { property:value; } 가상 클래스 (pseudo-classes) 와 본래의 CSS 클래스 (CSS classes) 는 조합하여 사용할 수 있습니다. a.myButton:hov..

CSS 컴비네이터 태그 : 후손 (div p), 자식 (div > p) 태그 : 후손 (div p), 자식 (div > p) 태그 : 후손 (div p), 단 자식 (div > p) 은 아님 태그 : 일반 형제 (div ~ p), 바로 밑 형제 (div + p) 태그 : 일반 형제 (div ~ p) CSS 컴비네이터 (combinator) 는 선택자 (selector, 실렉터, 스타일의 묶음) 들간의 관계를 설정하는데 사용됩니다. CSS 선택자 (selector) 는 하나 이상의 단순 선택자 (simple selector) 를 여러 개 갖을 수 있는데, 이때 컴비네이터 (combinator) 를 기호로 포함하게 됩니다. CSS3 에는 4개의 컴비네이터 (combinator) 가 있습니다. 후손 선택자 :..

CSS 수평 정렬 플로우트 속성 (float property) 을 사용하여 태그를 정렬시킬 수 있습니다. 플로우트로 태그를 정렬할 때에 body 태그에 마진과 패딩을 0으로 설정하고 시작하면, 브라우저 별로 위치가 동일하게 보일 것입니다. 부모 div 태그 영역 position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 부모 태그 위로 오우버랩 (overlap, 겹치기) 할 수 있습니다. float 를 사용하여, 부모 태그를 기준으로 왼쪽, 오른쪽으로 배치할 수 있습니다. position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 다른 태그들 위로 오우버랩 (overlap, 겹치기) 됩니다. 그리고 먼저 body 태그의 margin 과 padd..

CSS 플로우트와 인라인-블록의 차이 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 그 다음에 올 div 영역에서는 inline-block; 을 사용한 경우, clear: left; 를 해 줄 필요가 없습니다. 인라인-블록 (inline-block) 을 플로우트 (float) 대신 사용하면 좀더 편리합니다. 클리어 (clear) 를 하지 않아도 되기 때문입니다. 그리드 ..

CSS 플로우트와 클리어 프로퍼티 플로우트 (float) 의 예 최초의 스노보드는 합판이나 플라스틱을 이용했으나 최근 기술 발달에 따라 얇은 나무 판 위에 유리섬유, 플라스틱 합성수지를 덧 씌워 만들고 있다. 보드의 바닥은 폴리에스틸렌으로 이루어져 있다. 알파인과 프리스타일의 차이점은 구조에 있지 않고 디자인에 있다. 프리스타일 보드는 앞코와 뒤꼬리가 위로 올라갔기 때문에 에지를 덜 사용한다. 반면 알파인 보드는 앞코만 약간 올라가고 꼬리는 올라가지 않았기 때문에 에지 전체를 오랫동안 이용할 수 있다. 길이가 가장 짧은 보드는 하프 파이프 보드, 가장 큰 보드는 다용도 보드이다. 스피드와 카빙의 효과를 높이도록 설계된 레이스보드도 있다.[2] 보드는 종류도 다양하고 수량도 많다. 각부의 폭과 길이, 강도..

CSS 포지션 프로퍼티 포지션 프로퍼티 (position property) 은 태그들을 어떻게 위치시킬지에 대한 유형을 지정합니다. 모두 네가지의 포지션 값이 있는데 아래와 같습니다. 기본위치 : static 상대위치 : relative 고정위치 : fixed 절대위치 : absolute 태그들은 위, 아래, 왼쪽, 오른쪽 프로퍼티로 정렬 시키는데, 먼저 포지션 프로퍼티 값에 무엇을 설정 하느냐에 따라 가끔 정렬이 원하는데로 되지 않을 수 있습니다. 따라서, 위, 아래, 왼쪽, 오른쪽 속성 값들은, 포지션 프로퍼티 값에 따라 달리 보이게 될 것입니다. position: static; 일반적인 포지셔닝으로 기본값입니다. position: static; 으로 설정된 태그들은 특별히 위치가 지정되지 않습니다...

CSS 디스플레이 프로퍼티 디스플레이 프로퍼티는 레이아웃을 관리하기 위한 매우 중요한 CSS 프로퍼티입니다. 태그의 유형에 따라 기본 디스플레이 프로퍼티 값이 정해지는데, 기본 디스플레이 값은 블록(block)과 인라인(inline)이 있습니다. 블록-레벨(block-level) 태그는 항상 새로운 줄에서 시작하고 (가능한한) 화면의 전체폭을 채웁니다. 블록-레벨 태그들은 아래와 같습니다. , 에서 , , , , , 인라인(Inline) 태그는 새로운 라인에서 시작하지도 않고, 꼭 필요한 폭 만큼만 갖습니다. 인라인 태그들은 아래와 같습니다. , , Display: none; 은 자바스크립트에서 사용되어, 태그를 삭제/재생성하기 보다는, 숨기고 보이게 할 때 사용합니다. 자바스크립트와 같은 태그에서는 d..

CSS 테이블 및 목록 채소 또는 과일 영문 기타 딸기 Strawberry 산딸기 뱀딸기 수박 Watermelon 무등산 수박 돌 수박 파인애플 Pineapple Pine = 소나무 Apple = 사과 채소 또는 과일 영문 기타 딸기 Strawberry 산딸기 뱀딸기 수박 Watermelon 무등산 수박 돌 수박 파인애플 Pineapple Pine = 소나무 Apple = 사과 Table Generator 사이트 같은 곳에서 CSS 테이블 코드를 복사해서 쓸 수 있습니다. Table Generator 사이트를 새창에 띄우기 Table Generator 사이트 같은 곳에서 CSS 테이블 코드를 복사해서 쓸 수 있습니다. Table Generator 사이트를 새창에 띄우기 Title 1 Title 2 Tit..

CSS 링크 버튼 몇 가지 CSS 프로퍼티를 조합하면 박스 형태의 버튼으로 링크를 표현할 수 있습니다. 일반적인 텍스트 링크 다음으로 이동 네이버로 이동 일반적인 텍스트 링크 다음으로 이동 네이버로 이동 Button Generator 사이트 같은 곳에서 CSS 버튼 코드를 복사해서 쓸 수 있습니다. Button Generator 사이트로 새창 띄우기 Button Generator 사이트 같은 곳에서 CSS 버튼 코드를 복사해서 쓸 수 있습니다. Button Generator 사이트로 새창 띄우기 단, 링크의 상태별 스타일 설정은 코딩하는 순서가 있습니다. 아래처럼 hover 는 link 다음으로 와야 하고, active 는 hover 다음에 와야 합니다. a:link 또는 a:visited a:hover..