목록CSS (7)

채니의 개발일기

CSS - 플렉스(정렬): flex container, flex items, justify-content,

flex display: flex;는 CSS의 속성 중 하나로, 요소들을 가로 또는 세로 방향으로 정렬하고 공간 배분을 조정하기 위한 도구 1.Flex Container: Flex Container는 Flexbox 레이아웃을 적용하기 위한 부모 요소입니다. lex Container에 display: flex; 또는 display: inline-flex;를 설정하여 Flexbox 레이아웃을 활성화시킨다. Flex Container에 적용되는 주요 속성: display: flex 또는 inline-flex 값을 사용하여 Flex Container를 정의 flex-direction: Flex Items의 배치 방향을 결정 (row, column, row-reverse, column-reverse 등). jus..
프론트엔트/HTML,CSS 2023. 8. 19. 20:39
CSS- a태그: 링크선택자 밑줄없애기 text-decoration: none

위 선택자 처럼 a태그의 밑줄을 없애주기위해서는 text-decoration: none 코드를 작성할것 a{ text-decoration: none; } 이후 hover를 추가하여 링크선택자임을 알려줄것 마우스로 선택시 색상이 바뀌게 된다 a:hover{ color:#000; }
프론트엔트/HTML,CSS 2023. 8. 19. 15:35
postion을 통해서 수직 가운데 위치하기(top:0, bottom:0, margin:auto 0)

: .box1에 top,bottom에 0을 주고 position:absolute;값을 주면 위치상 부모 요소를 파악하지 못하기때문에 container위에 box1이 위치함을 알 수 있음 : .container에 position:relative;추가 .box1 { width: 100px; height: 100px; background-color: red; position:absolute; top: 0; bottom: 0; margin: auto 0; } hegith값, top:0, bottom:0, margin: auto(top,botoom) 0;으로 지정하면 수직가운데 위치 할 수 있다 번외편: 수평가운데 위치 left:0, right:0;, marging: auto, width 지정하면 수평가운데로 위..
프론트엔트/HTML,CSS 2023. 8. 18. 19:09
css - display속성

CSS의 display 속성은 요소의 표시 방법을 지정하는 데 사용된다 HTML 요소는 각각 기본적인 특성을 가지며, 이러한 속성을 display 속성을 사용하여 변경할 수 있다. 인라인과 블록요소 설명↓↓↓↓ 2023.07.16 - [프론트엔트/HTML,CSS] - CSS:너비(width, height), 인라인과블록요소 CSS:너비(width, height), 인라인과블록요소 너비 너비는 모두 기본값은 auto(브라우저가 넓이 계산)으로 지정 width: 가로넓이 height: 세로넓이 인라인,블록요소 인라인요소: 포함한 컨텐츠 크기만큼 자동으로 크기조절가능 ex)span태그 -> 자동 xcwaonvy.tistory.com 각요소가 이미 지정되어있는값 block: 요소를 블록 레벨 박스로 지정. 너비..
프론트엔트/HTML,CSS 2023. 7. 30. 16:32
CSS- margin

CSS에서 margin은 요소 주위의 공간을 조절하는 속성입니다. margin을 사용하여 요소의 상하좌우에 여백을 추가하거나 감소시킬 수 있습니다. margin 속성의 기본값은 0입니다. 이는 요소 주위에 어떠한 여백도 적용하지 않음을 의미합니다. auto 값은 브라우저가 자동으로 여백을 계산하여 요소를 가운데 정렬하는 데 사용될 수 있습니다. 이는 주로 블록 요소를 가운데로 정렬하는 데 유용합니다. -> margin-left와 margin-right를 auto로 준값 = magin: auto; 해도 같은값이나옴 margin의 단축속성 선택자 { margin: 상단 우측 하단 좌측; } 1) div { margin: 10px 20px 30px 40px; } -> 상단 여백을 10픽셀, 우측 여백을 20픽..
프론트엔트/HTML,CSS 2023. 7. 18. 23:41
CSS - 웹폰트

https://fonts.google.com Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com : 브라우저 마다 보이는 폰트가 다르기때문에 포트를 지정할 것 ***나눔 고딕으로 설정하기 (대부분 나눔고딕 사이즈는 :400 과 700을 주로 활용) -> selected family에 400,700추가 1. 링크방식의 CSS코드를 에 추가 2. font-familly 를 css에 복사 붙여넣기 예시 코드 body{ color: red; font-size: 100px; font-family: 'Nanum Gothic', sans-serif; } -> 구글..
프론트엔트/HTML,CSS 2023. 7. 14. 19:31
이전 Prev 1 2 Next 다음