Developer Gonie

버튼 내부의 글자색은 color 를 이용해 바꿀 수 있고 버튼 또한 border-radius 르 이용해 바깥을 둥굴게 만들 수 있다.

적용 가능 대상이 all, print, screen, speech 4가지가 있는데 이 중에서 screen을 공부하였었다. 아래는 창의 크기가 달라짐에 따라 보여지는 이미지 파일이 달라지는 예제이다. 사용예시

transform-origin - 회전 등을 할 때 이용할 원점의 위치를 지정하는 속성으로 이것만 사용하면 아무런 일도 일어나지 않는다. 회전을 수행하는 transform : rotate(25deg) 등과 같이 사용해야 적용된다. + transform-origin: center; 회전의 기준점을 중앙으로 지정(디폴트) + transform-origin: top left; 회전의 기준점을 왼쪽 위 지점으로 지정 + transform-origin: 50px 50px; 회전의 기준점을 왼쪽 위 지점에서 x축으로 50px, y축으로 50px 이동한 곳으로 지정 + transform-origin : 20% 40%; 아마도 바로 위의 것과 비슷한듯 생략{ transform : rotate(25deg); /* 25도..

display 속성 이 속성을 이용하면 블록 요소를 인라인 요소로, 인라인 요소를 블록 요소로 변경 가능하다. 아래는 인라인 요소인 img 요소를 블록 요소로 변경해준 예시이다. (block / inline / none)- none 으로 설정해주면 요소를 안보이게 숨길수도 있음 img요소가 인라인 요소일때 4개의 이미지가 배치되는 방식 img 요소는 원래 인라인 요소라서 가로로 이어붙은 상태로 배치됨 img요소가 블록요소일때 4개의 이미지가 배치되는 방식 img 요소를 display 속성을 이용해 블록요소로 변경해주면 하나의 이미지가 한 줄을 다 차지하게 되어 아래와 같은 변화가 생긴다. img{ display : block; }

p태그는 원래 한 줄을 다 차지하는 블록요소라서 이미지랑 같이 띄워질 수 없지만 float 속성을 이용하면 이미지와 어우러지게 배치할 수 있다. float : (left / right)

Position 속성이 'static'일 때(디폴트) static방식이 디폴트이며, 내가 아무것도 지정해주지 않았을 때 요소들이 배치되는 방식이다. 요소들이 겹치지 않고 알아서 배치되는게 특징이다. 주의해야할 점으로 position 속성이 static 일 때는 relative 방식에서 사용하는 top, left, bottom, right 속성을 아무리 줘도 무시된다. Position 속성이 'relative' 또는 'absolute'일 때 relative, absolute는 비슷한데, 둘 다 top, left, bottom, right 속성을 주어 기준점으로부터 얼마나 떨어진 자리에서부터 요소가 그려질지 지정할 수 있다. 또한, 이 두 가지 방식을 사용하게 되면 요소들을 겹쳐지게 띄우는게 가능해진다. 다..

* 둘다 공통으로 첫 번째, 두 번째 인자는 x축, y축으로 얼마나 이동해라는 인자값이고 맨 마지막 인자는 그림자의 번짐 정도를 의미한다. text-shadow : 텍스트의 그림자 설정 box-shadow : 요소 영역의 그림자 설정

background : 아래의 속성들을 나열해서 한 번에 지정하는 속성이다. 디폴트로 background-repeat 이 바둑판 배치로 설정되므로 반복이 싫으면 두번째 인자로 no-repeat을 써줘야 한다. background-color: 배경색 지정 background-image: 사용할 이미지 파일의 경로를 인자로 줌 background-repeat : 지정한 사진을 x축으로 반복시켜 배열할지, y축으로 반복시켜 배열할지(repeat-y / repeat-x/no-repeat) background-position: 지정한 사진이 나타날 시작지점을 지정 background-attachment : 스크롤을 움직일 때 사진도 그 방향에 따라 움직일 것인지 뒤에 고정되어 있을 것인지(scroll / fixed)

* 둘의 사용 용도 헷갈릴 때 연상법 : 패딩은 몸안에 따뜻한 공기를 채움, 마진은 바깥으로 유통해서 마진을 남겨야 함. padding 적용 예시 margin 적용 예시 안쪽여백 조절 : 바깥의 테두리와 요소안에 위치한 텍스트 사이의 공백을 조절한다. padding padding-left padding-right padding-top padding-bottom 바깥쪽 여백 조절 margin : 1개 입력시 x4개, 2개 입력시 x2개(이중 1개를 auto 입력시 auto에 해당하는건 중앙에 오도록 조정됨) margin-left margin-right margin-top margin-bottom

테두리 선 관련 속성 한번에 나열해 지정 border 테두리 선 굵기 지정 border-width (최대 4개 값 나열 가능) border-left-width border-right-width border-top-width border-bottom-width 테두리 선 모서리 곡률 지정(둥글게) border-radius (최대 4개 값 나열 가능, 왼위, 오위, 오아, 왼아) border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 테두리 선 스타일 지정(점선, 실선 등) border-style (최대 4개 값 나열 가능) border-left-style border-right-sty..

list-style-image : 리스트 원소 앞에 위치하는 도형의 모양을 지정해줄 수 있는데, 사진으로도 변경이 가능하다. list-style : 앞에 위치하는 모양을 없애거나 벼경할 수 있다.

+ font-family : 글꼴을 지정하며 보통은 여러개를 나열함(존재하는 단 1개만 적용됨) + font-style : 글자 기울기 + font-weight : 글자 굵기 + font-size : 글자크기 + background-color : 글자 배경색 + color : 글자색깔 + width : 한 줄을 다 차지하는 블록 요소의 너비를 줄이고자 할 때 사용함 + font : 한 줄로 나열해서 작성시 사용(입력할 때 순서가 존재함에 주의) + text-decoration : 밑줄 관련 속성 나열 한번 하는 경우 사용(두께, 선색, 모양 등 지정가능) none 으로 주어 a 태그로 링크걸시 자동으로 추가되는 밑줄을 안보이게 할 수 있기도 하다. + text-align : 요소 내에서의 텍스트 위치 정..