티스토리

Java 초보 공부하자 😊

검색하기

블로그 홈

Java 초보 공부하자 😊

roajava.tistory.com/m

로아다 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[CSS] Grid display: grid - column과 row를 설정할 수 있는 display 속성 - display: grid로 설정한 요소는 grid container가 된다. - display: grid로 설정한 요소는 grid container가 된다. grid-template-columns - 컬럼의 개수 및 너비를 지정 - fr을 통해 너비의 비율을 설정할 수 있다. grid-template-rows - 행의 개수 및 높이를 지정 column-gap - 각 컬럼 사이의 간격 설정 row-gap - 각 행 사이의 간격 설정 # display: grid column과 row를 설정할 수 있는 display 속성 display: grid로 설정한 요소는 grid containe.. 공감수 0 댓글수 0 2023. 6. 11.
[CSS] Position Position property - 포지션이 설정되지 않은 요소들을 무시하면서 요소를 마음대로 배치할 수 있는 속성 - static : defalut, 포지션이 설정되지 않은 상태 - absolute : 부모 요소 내에서 절대적인 위치를 설정 (부모 요소도 포지션이 설정되어있어야 부모로 인식된다.) - relative : 해당 요소가 원래 있던 위치로부터 상대적인 위치를 설정 - fixed : 화면에 고정되는 위치를 설정 - sticky : 스크롤이 변하면서 고정될 위치를 설정 - 포지션을 설정하고 난 후 top/bottom, left/right로 위치를 설정할 수 있다. - 포지션이 설정된 요소들 끼리는 겹칠 수 있으므로 높낮이 개념이 존재한다. (어떤 요소가 더 위에 있어야 하는지는 z-index p.. 공감수 0 댓글수 0 2023. 6. 11.
[CSS] Flex display: flex - 내부 요소들의 크기를 자동으로 조절해주는 display 속성 - display: flex로 설정한 요소는 flex-container가 되고 해당 컨테이너 내부의 요소들은 flex-item이 된다. flex-direction : 이 컨테이너가 items를 나열하는 방향 결정 - row : 가로로 나열하기 (왼 -> 오) - row-reverse : 가로로 나열하기 (오 -> 왼) - column : 세로로 나열하기 (위 -> 아래) - column-reverse : 세로로 나열하기 (아래 -> 위) flex-direction: row-reverse; /* items의 방향을 결정 */ justify-content : flex-direction 방향의 정렬 설정 - flex-st.. 공감수 0 댓글수 2 2023. 6. 8.
[CSS] Display Display property - 해당 요소가 어떻게 보여야 할지를 결정하는 속성 - 요소가 보이는 방식에는 기본적으로 block과 inline이 있다. display: block - 항상 한 줄을 모두 차지한다. - 기본 너비는 100%로 설정되어 있다. - 박스 취급 - padding과 margin을 통한 여백 설정이 가능하다. - ex - div, p, h, ul, li, ...등의 기본값 display: inline - 한 줄을 차지하지 않고 필요한만큼만 차지한다. - 글자들 사이에서 특정 부분을 선택할 때 주로 사용한다. - padding과 margin이 제대로 적용되지 않는다. - ex - span, a, b, i, mark, ...등의 기본값 display: inline-block - inl.. 공감수 0 댓글수 0 2023. 6. 8.
[CSS] Float Float - 다른 내용(content)들이 해당 요소를 비켜가게 만든다. - float 설정한 요소는 둥둥 떠있는 요소로 바뀐다. - float 요소끼리는 한 줄을 가득 채우면 다음줄로 넘어가는 특성이 있다. - clear 속성을 사용해 원하는 쪽에 float 요소가 오지 않게 할 수 있다. - float 요소는 해당 요소를 포함한 요소의 크기 결정에 영향을 미치지 못한다. - float 설정된 요소가 바깥 요소를 넘치지 않게 하기 위해 float이 포함된 요소의 맨 마지막에 가짜 요소를 추가하고 clear를 통해 요소의 크기를 늘려주는 것이 좋다. float: left; # Float 다른 내용(content)들이 해당 요소를 비켜가게 만든다. float 설정한 요소.. 공감수 0 댓글수 0 2023. 6. 8.
[CSS] 가상 요소 Pseudo element - 해당 요소의 특정 부분을 선택하는 선택자 - 선택자 뒤에 ::을 붙여 원하는 부분만 선택할 수 있다. - ::first-letter - 첫 번째 글자 - ::first-line - 첫 번째 줄 - ::selection - 블록지정된 부분만 선택 - ::before - 해당 요소의 맨 앞부분을 선택 - ::after - 해당 요소의 맨 뒷부분을 선택 # Pseudo element 해당 요소의 특정 부분을 선택하는 선택자 선택자 뒤에 ::을 붙여 원하는 부분만 선택할 수 있다. ::first-letter - 첫 번째 글자 ::first-line - 첫 번째 줄 ::selection - 블록지정된 부분만 선택 ::before - 해당 요소의 맨 앞부분을 선택 ::after - 해.. 공감수 0 댓글수 0 2023. 6. 7.
[CSS] 가상 클래스 Pseudo class - 선택자 뒤에 추가해 해당 요소의 특정 상황만을 선택하는 것 - 선택자 뒤에 :을 붙여 원하는 특정 상황만을 선택할 수 있다. 종류 - :first-child - 해당 요소가 첫 번째 자식인 상황에 적용할 스타일 - :first-of-type - ... - :hover - 마우스가 해당 요소 위에 올려져있는 상황 - :link - 해당 링크가 방문한 적 없는 링크인 상황 - :active - 해당 링크를 클릭하는 중인 상황 - :visited - 해당 링크에 방문한 적이 있는 상황 # Pseudo class 선택자 뒤에 추가해 해당 요소의 특정 상황만을 선택하는 것 선택자 뒤에 :을 붙여 원하는 특정 상황만을 선택할 수 있다. # 종류 :first-child - 해당 요소가 첫 .. 공감수 0 댓글수 0 2023. 6. 7.
[CSS] 아이콘(Icon) Icon CDN 1. Goolge Icon 2. Font-awesome - 아이콘은 실제로는 글꼴이기 때문에 글자색과 글자크기를 설정하여 색상과 크기를 설정할 수 있다. Google Icon search Font-awesome 공감수 0 댓글수 0 2023. 6. 7.
[CSS] 글꼴 font-family - font-family property로 원하는 글꼴을 선택할 수 있다. - 기본적으로는 해당 컴퓨터에 설치되지 않은 글꼴은 사용할 수 없다. - 글꼴이 존재하지 않는 경우를 대비해 여러가지 예비용 글꼴들을 설정해둘 수 있다. - 접속한 사용자에게 글꼴을 설치하게 하는 것보다는 CDN이라는 개념을 많이 사용한다. - CDN: Content Delivery Network, 다른 회사에서 인터넷에 올려놓고 배포하는 이미지, 글꼴 등의 리소스들을 의미한다. font-family: 'Gamja Flower', cursive; 팬그램 - A부터 Z(ㄱ ~ ㅎ)를 모두 사용하여 만든 문구를 팬그램이라고 하며, 주로 글꼴을 확인하는 용도로 사용한다. - 한국어 : 다람쥐 헌 쳇바퀴에 타고파 -.. 공감수 0 댓글수 0 2023. 6. 7.
[CSS] 그림자(shadow) text-shadow - 첫 번째 값: 그림자의 수평 위치(x) - 두 번째 값: 그림자의 수평 위치(y) - 세 번째 값: 그림자의 번짐 정도 - 네 번째 값: 그림자의 색상 - ,로 여러 옵션을 겹쳐서 적용하는 것이 가능하다. text-shadow: 5px -5px 3px red; # text-shadow 첫 번째 값: 그림자의 수평 위치(x) 두 번째 값: 그림자의 수평 위치(y) 세 번째 값: 그림자의 번짐 정도 네 번째 값: 그림자의 색상 ,로 여러 옵션을 겹쳐서 적용하는 것이 가능하다. TEXT SHADOW EFFECT TEXT SHADOW EFFECT TEXT SHADOW EFFECT # box-shadow BOX SHADOW EFFECT BOX SHADOW EFFECT BOX SHADOW .. 공감수 0 댓글수 0 2023. 6. 7.
[CSS] 텍스트(text) text-align :텍스트 정렬 - center : 중앙 - left : 왼쪽 - right : 오른쪽 - justify : 보편적으로 사용되는 정렬 vertical align : 줄 내에서의 높이 설정 - top : 상단 - middle : 중앙 - bottom : 하단 text-decoration:글자에 줄 긋기 text-decoration: solid 1px red underline; letter-spacing : 글자 간격 설정 letter-spacing: 0px; line-height : 줄 간격 설정 line-height: 5px; width: 100px; word-spacing : 단어 간격 설정 word-spacing: 5px; text-indent : 문단 첫 줄 들여쓰기 설정 text.. 공감수 0 댓글수 0 2023. 6. 4.
[CSS] 단위(px, mm, cm, in) 절대 길이 단위 - px: 픽셀(화소) - mm: 밀리미터 - cm: 센치미터 - in: 인치 상대 길이 단위 - em: 해당 요소의 font-size에 비례한 크기 설정 - rem: 현재 페이지 전체(html)에 설정된 font-size에 비례한 크기 설정 - vw: viewport width에 비례한 크기 설정 (1vw는 화면 너비의 1% 크기를 의미한다.) - vh: viewport height에 비례한 크기 설정 (1vh는 화면 높이의 1% 크기를 의미한다.) # 절대 길이 단위 px: 픽셀(화소) mm: 밀리미터 cm: 센치미터 in: 인치 100px 100mm 5cm 1inch # 상대 길이 단위 em: 해당 요소의 font-size에 비례한 크기 설정 rem: 현재 페이지 전체(html)에 .. 공감수 0 댓글수 0 2023. 6. 4.
[CSS] 여백(margin, padding) margin -해당 요소와 다른 요소의 거리를 결정하는 여백 - border 바깥 쪽의 여백 - margin-bottom과 magin-top이 만나는 곳에서는 둘 중 더 높은 margin만 적용된다. - margin을 auto로 설정하면 해당 요소를 가운데로 정렬해준다. padding -border 안쪽부터 컨텐츠까지의 여백 - 기본적으로는 padding의 크기가 요소의 전체 크기에 가산된다. HTML Box Model - HTML의 모든 요소는 박스 형태로 구성되어 있다. - 요소를 구성하는 박스의 제일 바깥쪽 여백이 margin이고 border, padding, content-box 순으로 요소를 박스현태로 구성하고 있다. - F12 개발자 도구를 통해 그림으로 확인할 수 있다. box-size 1... 공감수 0 댓글수 0 2023. 6. 4.
[CSS] 테두리(border) 테두리 기본 설정 border: royalblue 3px solid; /* color, width, style */ #border-style-list { /* border shorthand : 원래는 width, style, color를 각자 설정해야함 */ border: royalblue 3px solid; list-style-type:none; } #border-style-list > li { border:solid black 5px; padding: 3px; margin: 15px; font-size: 35px; } #border-style-list > li:first-child { border-style: solid; } #border-style-list > li:nth-child(2) { bor.. 공감수 0 댓글수 0 2023. 6. 4.
[CSS] 배경(background) : 영역을 지정하는 용도로 사용하는 태그 Bakcground Test Div...1 Bakcground Test Div...2 Bakcground Test Div...3 Bakcground Test Div...4 배경 이미지 설정하는 법 background-image: url('https://cdn.maily.so/kmvujyhbpk5at4ic8dkjf51kdjbn'); border : 해당 요소의 테두리 설정 border: solid 3px black; height : 요소의 높이 설정 height: 300px; font-size : 해당 요소의 글자 크기 설정 font-size: 30px; background-size : 배경 이미지 크기 설정 (auto : 이미지에 맞게 자동 설정) /* 배경 이미.. 공감수 0 댓글수 0 2023. 6. 4.
[CSS] CSS 적용하기 웹 페이지에 스타일시트를 적용하는 3가지 방법 1. inline css (줄 내부 css) - HTML style attribute를 사용하는 방식 - 적용 우선 순위가 가장 높다. - style 속성의 값은 css 문법이다. 2. internal css (내부 css) - 페이지 내부의 style 태그를 사용하는 방식 - 더 나중에 나온 스타일이 우선 순위를 갖는다. 3. external css (외부 css) - 외부의 css 파일을 사용하는 방식 - 태그를 사용해 외부의 css를 불러와서 사용한다. - 더 나중에 나온 스타일이 우선 순위를 갖는다. # 웹 페이지에 스타일시트를 적용하는 3가지 방법 1. inline css (줄 내부 css) - HTML st.. 공감수 0 댓글수 0 2023. 6. 4.
[CSS] 선택자 기본 CSS 구조 선택자(Selector) { 속성(property): 값(property value); color: red; background-color: blue; } 선택자(Selector) - #id : 해당 ID속성을 지닌 요소를 선택한다. (id 속성은 해당 웹페이지 내에서 유일한 값이어야 한다.) - .class : 해당 class 속성을 지닌 요소를 모두 선택한다. (일반적으로 class 속성을 여러 요소에 같은 이름으로 존재한다.) - * : 모든 요소 선택 - html : 모든 요소 선택 - 공백 : 모든 자손 요소 선택 - > : 자식 요소 선택 - , : 여러개의 선택자를 사용할 때 # 선택자(Selector) CSS에서 원하는 요소를 선택하기 위한 것 tagname : 해당 HT.. 공감수 0 댓글수 0 2023. 6. 4.
[CSS] CSS CSS란? - CSS는 해당 웹 페이지의 스타일(디자인)을 담당한다. - CSS는 웹 브라우저에게 해당 페이지의 요소가 어떤 모습으로 사용자에게 보여져야하는 가를 정의해놓은 목록이다. - CSS를 보고 웹 브라우저들이 해당 요소를 화면에 그려준다. - 스타일 시트를 통해 모든 요소의 디자인을 원하는대로 수정할 수 있으므로 HTML의 기본 디자인 설정은 거의 쓸모가 없다. - HTML은 결국 해당 태그가 가지고 있는 의미만 남아있게 된다. css 주석 /* CSS 주석 */ /* 한 줄 주석은 따로 없다. */ # CSS (Cascading Style Sheet) CSS는 해당 웹 페이지의 스타일(디자인)을 담당한다. CSS는 웹 브라우저에게 해당 페이지의 요소가 어떤 모습으로 사용자에게 보여져야하는 가를.. 공감수 0 댓글수 0 2023. 6. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.