일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- Scanner
- Jenkins
- suvlet
- 콜렉션
- dependency
- 컬렉션
- 자동형변환
- 내장객체
- 메소드
- 스프링
- 인텔리제이
- wrapper
- 클래스
- maven
- 싱글턴
- 루프
- boxing
- 언박싱
- 제네릭
- start.spring.io
- 싱글톤
- bootstrap
- https://start.spring.io
- Short
- 박싱
- 무한
- unboxing
- 제너릭
- Java
- 빌드
- Today
- Total
목록K-DigitalTraining 강의 (333)
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 속성을 주어 기준점으로부터 얼마나 떨어진 자리에서부터 요소가 그려질지 지정할 수 있다. 또한, 이 두 가지 방식을 사용하게 되면 요소들을 겹쳐지게 띄우는게 가능해진다. 다..
- body 안에서 쓰이는 태그이며, 화면의 상단에서 큰 제목이 되는 것을 여기에 작성한다. - 본문 내용이 여기서 본격적으로 시작되는구나를 알 수 있도록 본문 내용을 이 부분에서 작성함 - body 안에서 쓰이는 태그이며, 화면의 맨 아랫부분임을 알리기 위해 사용한다.
* 둘다 공통으로 첫 번째, 두 번째 인자는 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)
'큰따옴표' 사용예시(") '&'기호 사용예시(&) & 기호는 기호 그대로 사용해도 잘 보여졌던거 같은데 만약 기호 그대로 보여지지 않는다면 이 방식을 사용하면됨. 공백 여러번 삽입 사용예시( ) 스페이스로는 여러번 공백을 삽입한다고 해도 1번으로 인식되는데 공백을 여러번 삽입하고 싶을 때 사용하면 된다. '>'기호 사용예시(>) '>>' 혹은 '
* 둘의 사용 용도 헷갈릴 때 연상법 : 패딩은 몸안에 따뜻한 공기를 채움, 마진은 바깥으로 유통해서 마진을 남겨야 함. 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..