NILGI

top 요소의 위쪽 속성을 설정 top은 위에서 얼마의 공간을 두고 배치 할지 설정합니다. left, right, bottom 값 설정 방법과 동일합니다.

text-align 텍스트 정렬 방식을 설정 left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 inherit : 상위 요소에 상속 받는다.

right 요소의 오른쪽 속성을 설정 right 값은 px, %로 표현합니다. 오른쪽에서 얼마의 공간을 두고 배치 할지를 정합니다.

position 요소의 위치를 설정 static : 기본값. top, right, bottom, left로 값을 지정 할 수 없습니다. absolute : 절대적 위치 값. top, right, bottom, left로 위치 값을 지정합니다. relative : 상대적 위치 및 기준점으로 설정. top, right, bottom, left로 위치 값을 지정합니다. fixed : 위치를 고정. 스크롤해도 움직이지 않는다. top, right, bottom, left로 위치 값을 지정합니다. * 예시 이미지로는 설명을 다 할 수 없는 부분이 있습니다. 많이 연습해보세요.

padding 요소의 안쪽 여백을 설정 ▲ 녹색 영역이 padding 입니다. 값은 em, px, % 를 쓸 수 있고 음수 값을 가질 수 있습니다. padding은 padding-top, padding-right, padding-bottom, padding-left 모든 값을 가지고 있습니다. padding: 10px; /* 상-우-하-좌 */ padding: 10px 20px; /* 상하-좌우 */ padding: 10px 20px 30px; /* 상-좌우-하 */ padding도 margin 거의 99% 동일하게 속성을 설정합니다.

outline 요소의 아웃라인의 색, 스타일, 굵기를 정의 outline-color : 색outline-style : 라인 종류outline-width : 굵기outline 태그에는 위 3가지 속성이 있습니다. 그러나 각각 태그를 쓸 필요 없이 다음 처럼 사용하면 됩니다. outline: 8px inset #ccc; >> outline : 라인굵기 라인종류 색; outline 태그는 border와 쓰는 방법이 같음을 알 수 있습니다.

margin 요소의 바같쪽 여백을 설정 margin은 margin-top, margin-right, margin-bottom, margin-left 모든 값을 가지고 있습니다. {margin: 50px;} 상-우-하-좌 {margin: 50px 60px;} 상하-좌우 {margin: 50px 60px 30px;} 상-좌우-하 {margin: 0 auto;} 상하-중앙정렬 위 값의 순서는 기억하기 어려우니 그냥 {margin: 0 0 0 0;} 상우하좌 하나만 기억하면 됩니다. 값은 px, %, auto를 쓸 수 있습니다. ▲ 마진 값을 가진 박스의 상하 마진 값은 겹칩니다. 상하 마진 값이 큰쪽으로겹치게 됩니다. 마진은 음수, 양수 값을 가질 수 있고 합산한 마진 값을 적용합니다. ▲ float으로 정렬..

line-height 문장과 문장 사이의 간격을 설정 문장 사이의 간격 값은 숫자; px; %;를 사용합니다.

left 요소의 왼쪽 속성을 설정 브라우저의 왼쪽에서 얼마만큼의 공간을 두고 요소를 표시 할지 정합니다.값은 px; 또는 %;로 정합니다. 참고로 position : absolute;는 요소의 절대적 값입니다.position : absolute;는 부모 div에 설정 할 수 있습니다.

height 콘텐츠 요소의 세로값을 설정 높이는 px; 또는 %; 로 설정합니다.

font 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정 폰트 스타일 지정은 .div1 {font-style: italic; font-weight: bold;font-size: 15px; line-height: 1;font-family: Impact;} 이와 같이 따로따로 태그를 넣어 꾸밀 수 있습니다. 하지만 다음처럼... .div2 {font: italic bolder 16px/1 Impact;}/* font: style // weight // size/line-height // family */ 이런씩으로 한줄에 다 표현 할 수도 있습니다. - 기타 태그 -font-variant : 글꼴 변형

float 블록요소의 정렬 상태를 설정 float: none; - 성질을 적용하지 않습니다.float: left; - 왼쪽으로 정렬float: right; - 오른쪽으로 정렬. 순서는 가장 오른쪽이 첫번째입니다.

display 요소의 성질을 정의 ▲ block; - 블록으로 요소를설정합니다. 쌓기 ▲ inline; 인라인으로 요소를 설정합니다. 가로 나열. 요소값을 무시합니다. ▲ inline-block; - 인라인 + 블록 성질를 가집니다. ▲ none; - 요소를 표시하지 않습니다. -기타 값- flex; - 플렉스 요소의 성질로 설정합니다. inline-flex; - 인라인 + 플렉스 요소의 성질을 설정합니다. inline-table; - 인라인 + 테이블 요소의 성질을 설정합니다. list-item; - 리스트 스타일 성질로 설정합니다. run-in; - 인라인 및 블록 요소의 성질을 하나만 선택하도록 설정합니다 table; - 테이블 요소의 성질로 설정합니다. table-caption; - 테이블 요소의..

color 요소의 글씨 색을 설정 rgba 값중 a는 투명값입니다.

bottom 블럭요소의 아래쪽 속성을 설정 bottom : auto; = 기본값bottom : 50px; = 아래에서 50px 공간을 두고 표시bottom : 10%; = 아래에서 브라우저 높이의 10%만큼의 공간을 두고 표시

border 테두리 속성을 설정 border : *px 모양 색; < 으로 표현한다.border : 1px; < 모양과 색이 없어 화면에 나오지 않는다.

background-color 백그라운 색을 설정 - 색상값-#f00, #ff0000, rgb (250, 0, 0), rgba (0, 0, 0, 0.8)transparent [default 값]inherit

background 배경 속성 값을 정의 예시) --- background-attachment : 배경이미지 고정여부background-blend-mode : 배경 혼합했을 때 상태background-clip : 색의 영역background-color : 색을 설정background-image : 이미지 속성background-origin : 이미지 영역 속성background-position : 이미지 위치 영역 설정background-repeat : 이미지 반복 여부background-size은 : 이미지 사이즈

어제저녁에 유니온 그랜드 마스터 I 달성했습니다.^^ 보통 유니온 8000이라 말하죠. 유니온 레벨 8000이란 육성 중인 캐릭터의 레벨 합이 8000이라는 뜻입니다. 레벨 200 캐릭터가 40개 있다는 말이죠. 유니온 창 구경 좀 해보겠습니다. 와~ 8000이다.^0^)/ 8000이 되면 좋은 점은 코인이 빨리 쌓이고 외부 점령 지역을 3개까지 채울 수 있습니다. 근데 아무리 해도 저기 두 칸을 위로 올릴 수가 없네요.ㅠㅠ 많은 분들이 하는 걸 봤는데 왜 저는 안될까요? 거의 2시간을 하다 포기했습니다. 또 시간 나면 해봐야겠습니다. 테트리스 은근 어렵네요.

See the Pen table by nilgi (@nilgi) on CodePen. 표를 정의 align="left" 왼쪽 정렬 ="center" 가운데 정렬 ="right" 오른쪽 정렬 bgcolor="blue" 테이블 배경색 border="1" 테이블 보더 값 cellpadding="3px" 셀과 컨텐츠 사이 간격 cellspacing="3px" 셀과 셀사이 간격 width="100" 테이블 가로 값 html5에서는 align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width 속성을 지원하지 않는다.

See the Pen style by nilgi (@nilgi) on CodePen. 문서에 대한 스타일 정보를 정의 media : 스타일이 적용될 매체 type : 스타일 언어 scoped : 부모와 자식요소 관계 설정 media속성이 생략되면 기본값은 "all" type속성 기본값은 "text/css"