까먹기 위해 기록하는 것이다

1. CSS와 애니메이션 1. 트랜스폼(변형) 특정 태그의 크기나 위치를 변경하는 것을 트랜스 폼이라고 한다. CSS에서 변형을 적용하기 위해서는 tranform속성을 지정해 줘야한다. transform: 함수(어떤 변형을 진행할 지) 2차원 트랜스폼(변형) 2차원 평면에서 웹 태그들을 변형한다. 2차원 좌표인 x축, y축을 사용하여 가로, 세로 이동을 시키거나 가로, 세로로 축소/확대 시키는 변형을 만들 수 있습니다. 2차원 변형 함수(tranform의 속성값) translate(x, y): 지정한 크기 만큼 x축, y축 이동 translateX(x), translateY(y): 각각 x축, y축 이동 scale(x, y): 지정한 크기만큼 x축, y축으로 축소/확대 scaleX(x), scaleY(y..

1. 다양한 선택자들 1. 속성 선택자 태그에 작성한 속성을 이용해서 태그를 선택할 수 있는 선택자 선택자[속성명]: 해당 속성을 가지고 있는 태그를 선택해서 사용한다. 선택자[속성명=속성값]: 해당 속성을 가지면서 속성값도 동일한 태그만 선택해서 사용한다. 2. 가상클래스 가상클래스는 사용자가 동작에 반응하는 클래스 가상클래스를 이용하면 사용자가 동하는 것에 따라 스타일을 변경할 수 있다. 대표적인 가상클래스의 종류 선택자:link : 사용자가 방문하지 않은 링크에 대한 스타일 적용 선택자:visited : 사용자가 방문한 링크에 대한 스타일 적용 선택자:hover : 사용자가 해당 태그에 마우스 커서를 올렸을 때에 대한 스타일 적용 선택자:active : 사용자가 해당 태그를 활성화 했을 때에 대한 ..

1. 표 관련 스타일 1. 표 제목의 위치를 지정하는 caption-side caption의 위치를 위인지 아래인지 정해줄 때 사용하는 속성 지정가능한 속성 값 top: 표 위에 제목 표시. 기본 값. bottom: 표 아래에 제목 표시. 2. 표 테두리 스타일을 지정하는 border 일반 태그에서 사용하는 border와 동일하게 설정 가능. 표의 바깥과 셀 모두 테두리를 지정해 줘야 된다. 3. 표 테두리를 통합해서 표출하거나 분리해서 표출하는 border-collapse 표의 테두리와 셀의 테두리를 합쳐서 하나의 테두리만 표출할 것인지 아니면 분리해서 모든 테두리를 표출할 것인지 결정해주는 속성 지정가능한 속성 값 collapse: 테두리를 하나로 합쳐서 표출 seperate: 테두리를 분리하여 따로..

1. CSS 포지셔닝 1. CSS 포지셔닝이란 CSS 속성을 이용하여 HTML 웹 문서의 태그들을 적절한 위치에 배치하는 것을 CSS 포지셔닝이라고 한다. float, position, visibility등의 속성들을 이용해서 태그들을 원하는 위치에 배치하여 웹 문서 구조를 잡는 작업 2. CSS 포지셔닝의 다양한 속성들 태그를 왼쪽이나 오른쪽 배치하는 float 속성 태그의 레이어를 바꿔서 붕 떠있게 하는 속성. 붕 떠있는 태그의 위치를 왼쪽 구석이나 오른쪽 구석으로 배치할 수 있다. 지정가능한 속성 값 left: 해당 태그를 웹 문서의 왼쪽에 배치 right: 해당 태그를 웹 문서의 오른쪽에 배치 none: 해당 태그를 좌우 어느 쪽에도 배치하지 않음 태그들의 배치 방법 지정하는 position 웹 ..

1. CSS와 박스모델 1. 블록 레벨 태그와 인라인 레벨 태그 블록 레벨 태그 태그를 추가했을 때 브라우저의 한 줄을 다 차지하는 태그를 블록 레벨 태그라고 한다. 해당 태그는 좌우에 다른 태그를 배치할 수 없다. 블록 레벨 태그는 width, height, margin, padding 등 크기나 위치를 지정할 수 있다. 인라인 레벨 태그 인라인 레벨 태그는 브라우저의 한 줄을 다 차지하지 않는 태그 인라인 레벨 태그 좌우에는 다른 인라인 레벨 태그들을 배치할 수 있다. 인라인 레벨 태그는 컨텐츠(내용)만큼의 공간을 차지하고 나머지 공간에 다른 태그들을 배치할 수 있다. 블록 레벨 태그와 인라인 레벨 태그의 종류 블록 레벨 태그 p, div, h1~h6, ul, ol, blockquote, form, ..

1. 색상과 배경을 위한 스타일 1. 웹에서 색상 표시하기 16진수 표기법 #과 함께 16진수 값으로 6자리를 표기하는 방식 앞 두자리는 빨간색, 가운데 두자리는 초록색, 마지막 두자리는 파란색의 양을 결정 하나도 색상이 섞이지 않은 값은 00, 가득 섞였을 때는 ff 사용가능한 범위의 값: 000000(검은색) ~ ffffff(흰색) 두 자리씩 값이 중복될 때는 세자리로 축약해서 표현가능. 같은 색상의 값이 중복일 때만 가능 ex) #ffff00 -> #ff0, #cccccc -> #ccc, #aaff33 -> #af3 rgb와 rgba 표기법 rgb(빨간색, 초록색, 파란색), rgba(빨간색, 초록색, 파란색, 투명도)로 사용가능 투명도를 제외한 빨간색, 초록색, 파란색의 값은 0 ~ 255까지 사..

1. 텍스트 관련 스타일 1. 글꼴 지정하는 font-family 웹 문서에서 사용할 글꼴을 지정하는 속성 웹 문서에서 글꼴을 지정할 시 한 가지 글꼴만 지정할 때도 있지만 해당 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 지정하는게 일반적이다. font관련 스타일들은 상속되기 때문에 body에 지정해 놓으면 웹 문서의 통일성을 높일 수가 있어 body에 지정하고 특정 태그에서만 변경하는 경우가 많다. 글꼴 지정 방식 font-family: 글꼴이름1, 글꼴이름2, 글꼴이름3, ... ex) font-family: '맑은 고딕', 돋움, 굴림 => 맑은 고딕으로 글꼴이 적용되는데 맑은 고딕이 없을 경우 돋움으로 돋움도 없을 경우에는 굴림이 적용 웹 글꼴 사용하기 웹 폰트 : 웹 문서 안에 글..

1. Selector(선택자) 1. Selecotr(선택자)란? CSS 속성을 적용시킬 태그를 지칭하는 것을 말한다. 선택자에는 여러가지 종류가 있고 전체 선택자, 클래스 선택자, 아이디 선택자, 자손 선택자, 가상 선택자 .. 등이 존재한다. 스타일 적용 방식에서 중괄호 앞에 쓰는 것들이 선택자가 된다. 2. 전체 선택자 웹 문서에 존재하는 모든 태그에 스타일을 적용할 때 사용. 전체 선택자는 별표(*)로 지정 * { 스타일1: 속성값1; 스타일2: 속성값2; .... } 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용 3. 태그 선택자 특정 태그에 스타일을 적용할 때 사용 전체 선택자가 가장 많은 태그들을 선택할 수 있다면 태그 선택자는 두 번째로 많은 태그들을 선택할 수..

1. CSS(Cascading Style Sheet) 1. CSS란? CSS는 HTML과 함께 웹 표준의 기본 개념 HTML이 웹 문서의 구조와 뼈대를 담당하고 CSS 웹 문서의 디자인 요소를 담당 CSS를 정의하는 방식 head 태그 안에 stlye 태그를 사용하여 정의하는 방식(내부 스타일 시트) body 안의 태그들에 style 속성으로 정의하는 방식(인라인 스타일 시트) 외부 CSS파일을 작성해서 링크를 걸어주는 방식(외부 스타일 시트) 스타일을 정의하는 방식은 태그들을 선택할 수 있는 선택자들을 이용해서 스타일을 정의할 수 있다. 선택자의 종류로는 태그 선택자, 아이디 선택자, 클래스 선택자 등등이 있다. 2. 스타일과 스타일 시트 스타일은 HTML 웹 문서에 글꼴이나 색상, 배경색, 각 태그의..

1. 시맨틱 태그 1. 시맨틱 태그란 시맨틱(semantic) 의미의, 의미적 뜻을 가진 형용사로 기능은 없고 의미적인 부분만 표현하는 태그 시맨틱 태그는 HTML 웹문서 구조를 잡는데 도움을 주는 태그. HTML5에 최초로 등장. 시맨틱 태그가 나오기 전에는 웹 문서 구조를 잡을 때 div 태그만 주로 사용. header, main, footer, nav, aside ... 등 아무기능 없이 위치를 표시하거나 영역을 나눌 때 사용한다. 시맨틱 태그의 종류 header : 사이트의 헤더 영역을 담당하는 태그 로고, 네브바(메뉴바), 검색창등이 포함 main : 사이트의 메인 콘텐츠를 표출하는 영역 section, article, aside 등의 시맨틱 태그로 다시 한 번 영역을 나눌 수 있다. foote..