Every step counts

CSS3부터는 애니메이션 기능도 사용할 수 있다. 지원하지 않는 일부 브라우저도 있지만 통상 점유율이 있는 브라우저들은 모두 지원된다. 먼저 키프레임을 통해 애니메이션을 등록한다. 시간비율은 0~100%로 작성한다. 애니메이션 동작의 1사이클 시간 내에서 해당 동작 시간이 차지하게되는 시간을 퍼센티지로 작성해주는 것이다. @keyframes [애니메이션명]{ 시간비율%{ 스타일; } 시간비율%{ 스타일; } } 의 형식으로 작성하면 된다. 적용시 사용가능한 속성들이다. - animation-name: 동작시킬 애니메이션의 이름 - animation-duration: 애니메이션 동작 시간 - animation-iteration: 애니메이션 반복 횟수. 숫자 또는 infinite(무한) 가능 - animat..

text-indent : 들여쓰기 길이 text-align : 정렬. left, right, center, justify(양쪽 정렬) text-decoration : 줄 긋기 - none - underline - overline - line-through font 속성: 글자모양, 크기, 속성, 굵기 font-size font-style font-weight font-family : 글자체를 여러개 지정 - 지정하려는 폰트들을 ,로 나열 - 한글폰트의 경우 한글이름과 영어이름을 같이 사용 - 마지막에 기본형 serif - 폰트 이름에 띄어쓰기가 있는 경우 큰따옴표로 묶어야함 test-overflow: ellipsis; 텍스트가 지정범위를 넘어갔을 때 white-space: nowrap : 한줄로 처리 h..

color: 글자색 background-color: 배경색 border-color: 테두리색 색상 지정 방법 - 이미 지정된 이름을 사용하는 방법: red, blue, green 등 - 16진수의 색상코드를 이용하는 방법: #ff0000 같은 포맷 - RGB코드를 사용하는 방법: rgb(255,0,0) - RGBA코드를 사용하는 방법: a는 투명도이며, 0~1사이의 값을 가진다. RGBA(255,0,0, 0.4) 간단하다. 연습삼아서 n모사의 유명한 검색창을 모방해서 만들어보자. 이하는 각 라인에 대한 설명이다. 61. 안의 내용은 조건에 따라 서버로 전송된다. 62. 품고있는 내용은 box라는 클래스 요소이다. 63. 품고있는 내용은 left라는 클래스 요소이다. 64. "검색어를 입력하시오"라는 메세..

HTML이 페이지의 기본 스트럭쳐라면 CSS는 거기에 스타일을 입혀주는 시트언어이다. 캡쳐된 이미지는 내가 연습삼아 HTML만으로 만든 페이지이다. 화려한 웹사이트들에 익숙한 요즘의 눈이 아니라 20년 전에도 이 정도는 제대로된 페이지라고 하기 힘들었다. 조금 낫지 않은가. 물론 CSS와 자바스크립트를 쓰기에 따라 얼마든지 더 멋지게 꾸며질 수 있다. CSS 스타일은 html 도큐먼트 내의 head 안에 style 태그를 이용하여 넣어줄 수도 있고, 별도의 파일로 만들고나서 html 도큐먼트 내에서 호출해서 사용할 수도 있다. 별도 파일을 만들어서 html 도큐먼트로 link 시키는 것이 일반적이고 권장된다. CSS의 기본단위 px: 고정된 픽셀 단위 pt: 포인트(1/72인치) pc: 피카소(1/6인치..

table은 일종의 표를 만들 때 사용한다. 다른 태그와 조합해서 만드는데, tr: 한 행을 의미 td/th: 한 열을 의미한다. td: 왼쪽 정렬, 일반 글씨(일반 내용) th: 가운데 정렬, 굵은 글씨(제목 또는 머리글) colspan 열 통합 rowspan 행 통합 속성; - border 테이블의 외곽선 표기. 두께 설정 가능 - bordercolor 외곽선의 색 - width 테이블의 너비 굳이 저런 표가 아니더라도 테이블을 사용하면 요소간 배치를 좀 더 깔끔하게 잡아줄 수 있는데,

1. pre 태그 안에 작성된 내용은 고정폭 글꼴을 사용하여 표현되며, 그 안에 사용된 띄어쓰기와 줄바꿈이 모두 화면에 그대로 구현된다. 없이도 작성한 그대로 반영되는걸 확인 할 수 있다. 2. div div는 영역을 분리하는 태그이다. 일종의 컨테이너 역할을 하는 태그라고 볼 수 있을 것이다. 가상의 레이아웃을 그어주는 것으로, 주로 CSS와 연동해서 쓴다. 3. img img 태그 속성 src: 이미지 경로 alt: 이미지가 없을 때 표시할 텍스트 width: 이미지의 가로길이 height: 이미지의 세로길이 auto: 원비율에 맞는 자동크기 이런 식으로도 활용해볼 수 있다.

1. 앵커 앵커란 일종의 책갈피 기능을 말한다. 인덱스에서 해당 목차를 클릭하면 그 위치로 이동하는 것. 나무위키의 목차를 예로 들 수 있을 것이다. ID는 요소(element)가 가지는 유일한 이름이며, 중복되어선 안된다. href에 ID명을 넣어주면 해당 ID로 이동할 수 있는 것. 이런식으로 활용 가능하다. 2. 리스트 리스트는 상/하위 목록을 구성할 때 사용한다. ol : 순서가 있는 리스트. 번호로 표현 ul : 순서가 없는 리스트 li : ol, ul 태그 안에 들어가는 하위 목록 - ol 태그 속성 type: 순서의 형태를 정해주는 속성 1이 기본. A,a,I,i 가능 start: 시작 지점을 정해줌 - ul 태그 속성 type: 기호모양을 결정해주는 속성 desc: 기본모양 circle: ..

1. a 태그 a 태그를 통해 다른 페이지로 이동하게 하거나 다운로드도 가능하다. - href 속성 이동할 url, 값이 없다면 현재 페이지로 새로고침 속성값에 //, http:// 이 있으면 url로 인식, 없으면 파일로 인식 값에 tel: 이 나오면 핸드폰으로 연결. 주로 모바일에서 사용 값에 mailto: 가 나오면 이메일로 연결 - target 속성 _self: 기본값, 현재 화면에서 링크를 새로 연다. _blank: 새창에서 열어서 링크 연결 _parent: 부모창에서 링크 연결 결제창처럼 팝업창(자식창)이 뜨고 팝업창의 값을 반영하여 본래의 창(부모창)이 변경되어야 할 경우. _top: 최고조상에서 링크를 연결. 부모가 없으면 _self와 동일. 다중 팝업창이 뜨는 경우. - download ..

input은 단일태그이나 속성값에 따라 다양한 기능들을 활용할 수 있다. form 태그와 같이 사용되는 경우가 많다. - input type = "text" (문자열을 입력받을 때 사용된다) placeholder(흐리게 표시되며, 문자가 입력되면 사라진다) - type = "button" 일반 버튼 - type = "reset" 리셋 버튼 - type = "submit" 전송 버튼(서버로 전송한다) - type = "password" 비밀번호로 사용. 인풋값을 화면상에 대체 기호로 출력함 - type = "checkbox" 다중 선택을 이용할 때 사용 - type = "radio" 하나만 선택할 때 사용 - 내용 라벨링을 통해 틱 박스 외의 항목의 이름을 클릭해도 틱이 되도록 설정 가능 - type="c..

Hyper Text Markup Language. CSS를 병합해 활용하기 전까지는 태그들을 익히는 것이 우선인 듯하다. - 제목 , 내에 들어간다. 제목1 제목2 이런 식 - 줄바꿈 - 수평 줄 그음 - 문단 작성 문단 위, 아래 기본 여백을 가진다. - 볼드체 text text - 기울임꼴 text text - 밑줄 text - 취소선 text - 윗첨자, 아래첨자 text text 공부한 것들을 간단히 활용해보자. Visual Stuio를 사용했다. HTML5 기본양식 지원이 되어 편리하다. 의도한대로 잘 표시되는걸 확인할 수 있다.