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

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..

CSS 텍스트와 폰트 프로퍼티 머리글 1 (가운데) 머리글 2 (왼쪽) 머리글 3 (오른쪽) 이 태그는 일반적인 문단 태그인데 텍스트의 색상이 회색이 되었습니다. 페이지의 기본 텍스트 색상은 body 태그의 selector 에 정의된 색상을 갖게 됩니다. 여기서 a 태그의 링크는 밑줄이 없습니다. example.com 머리글 1 (가운데) 머리글 2 (왼쪽) 머리글 3 (오른쪽) 이 태그는 일반적인 문단 태그인데 텍스트의 색상이 회색이 되었습니다. 페이지의 기본 텍스트 색상은 body 태그의 selector 에 정의된 색상을 갖게 됩니다. 여기서 a 태그의 링크는 밑줄이 없습니다. example.com CSS 글꼴 프로퍼티 (CSS font property) 는 활자체 (font family), 굵기 (..

CSS 마진, 패딩 CSS 마진 프로퍼티 (margin property) 는 테두리의 바깥쪽 여백의 크기를 설정 합니다. 마진은 완전히 투명해서 배경 색상을 갖을 수는 없습니다. CSS 로 태그의 각 면 (위, 오른, 바닥, 왼쪽) 의 마진 (margin) 을 제어할 수 있습니다. 어떤 태그의 각 면의 마진을 한 줄로 표현할 수가 있는데, 4가지 값을 갖는 경우에는, 앞에서부터 위, 오른, 아래, 왼쪽 순으로 마진 값을 갖습니다. 아래와 같이 갯수에 따라 가리키는 면이 다릅니다. CSS 패딩 프로퍼티 (padding property) 는 마진과 달리, 태그의 테두리 속에 (즉, 태그의 내용과 테두리 사이에) 흰 색의 공간을 추가합니다. 그런데 마진 (margin) 과 달리 패딩 (padding) 은 태그..

CSS 테두리 프로퍼티 CSS 테두리 프로퍼티 (border property) 는 태그의 테두리 색상, 폭, 및 스타일을 지정합니다. 테두리-스타일 프로퍼티 (border-style property) 로는 테두리의 종류를 지정합니다. border-style: dotted; //도트 ...... border-style: dashed; //데시 ------ border-style: solid; //실선 ______ border-style: double; //이중선 ====== border-style: inset; //들어간 3차원 border-style: outset; //돌출된 3차원 border-style: none; //없음 border-style: hidden; //숨겨짐 일단 테두리-스타일 프로퍼티..

CSS 배경 색상 및 배경 이미지 배경 색상 속성으로, 태그의 배경 색상을 지정합니다. CSS 에서 색상은 아래의 방법으로 지정합니다. 색상의 이름으로 지정하는 방법 "blue" 16진수 값으로 지정하는 방법 "#0000ff" RGB 값 (빛의 3원색) "rgb(0,0,255)" 배경-이미지 (background-image) 속성은 태그에 배경으로 사용될 이미지를 지정합니다. 기본 값으로 배경-이미지 속성은 수평방향, 수직방향으로 반복됩니다. 어떤 이미지는 수평 또는 수직의 한쪽 방향으로만 반복되어야 할 때가 있습니다. 이미지를 수평으로만 반복시키고 수직으로는 반복하지 않게 하려면, background-repeat: repeat-x; 속성을 추가합니다. 배경 이미지를 딱 한번만 나오게 하려면 backgr..

CSS 구문 및 선택자 CSS 규칙은, 선택자(Selector) 와 선언부로 구성됩니다. CSS 세상에 들어오신 것을 환영합니다. 이 문단에 CSS 스타일을 입혔습니다. 여기서 CSS 선택자(selector) [예에서는 p] 는 스타일을 지정하고 싶은 HTML 태그입니다. 선언부 [위 예에서는 { } 괄호 사이의 내용] 는 세미콜론 [;] 으로 구분하여 하나 이상의 선언 내용으로 구성됩니다. 각 선언 내용들은 콜론[:] 을 사이에 두고 CSS 속성 이름과 속성 값을 쌍으로 가지고 있습니다. 그리고 CSS 선언 내용은 항상 세미콜론으로 끝나고 선언부 전체는 { } 괄호로 둘러 싸야 합니다. CSS 선택자 들은 결국 HTML 태그를 찾는 역할을 하는데, 태그의 이름이나, id, class 이름, 속성 등을 ..

HTML 이미지 태그 HTML에서는 이미지 표시도 태그로 정의합니다. src 속성으로 이미지의 url 을 입력해 줍니다. alt 속성은 이미지가 로드되지 않았을 때 대체 문자를 표시해 줍니다. 또 alt 속성값은 페이지를 읽어주는 프로그램에서 사용되기도 합니다. 이미지 사용시, 가로와 세로 픽셀을 지정하는 것이 좋습니다. 가로 세로 픽셀이 지정되어 있지 않으면 이미지가 로드 될 때 떨수가 있습니다. 이미지의 경로가 지정되어 있지 않으면, 브라우저는 같은 폴더내에서 파일을 찾기 때문에, 폴더위치가 틀리다면 틀린부분을 적어 주어야 합니다. 하위 폴더에 이미지가 있는 경우가 많은데, 이때에는 폴더이름과 파일이름을 적어 줍니다. 다른 사이트에 있는 이미지의 경우에는 전체 경로를 모두 포함하여야 합니다. 이미지에..