STUDY/CSS 11

CSS : a 태그중 원하는 것만 스타일링을 하고싶을 때

HTML 삽입 미리보기할 수 없는 소스 를 사용하다가 원하는 앵커만 스타일링을 하고 싶을 때 사용 naver google Empty 내에 href 가 있는 태그만 선택하고 싶은 경우 a[href] { color: red; } a [href]을 사용하면 중 href가 있는 것만 선택할 수 있다. 내에 특정 경로가 들어있는 태그만 스타일링하고 싶은 경우 a[href="google.com"] { color: red; } 내에 특정 경로로 시작 /끝인 것만 스타일링하고 싶은 경우 /* 특정 경로로 시작하는 것*/ a[href^="google"] { color: red; } /* 특정 경로로 끝나는 것 */ a[href$=".com"] { color: red; } 시작하는 건 href^를 사용하고, 끝나는 건 h..

STUDY/CSS 2022.11.24

CSS : float & clear

CSS : float & clear float float 속성은 일반적인 요소의 흐름과 달리 둥둥 떠있는 것처럼 단독적으로 브라우저의 오른쪽과 왼쪽에 위치한다. 일반적인 문서의 흐름 예시 aaa bbb ccc 안녕하세요 div와 p 태그로 요소를 만들었을 때 위에서 아래로 순차적으로 만들어진 것을 볼 수 있다. aaa, bbb, ccc, p태그 순으로 되어있다. float 예시 aaa bbb ccc 안녕하세요 aaa와 bbb에 float : right를 주니 aaa가 오른쪽에 고정된 것을 볼 수 있다. ccc에 float : left를 주니 p태그 와 같은 선상에 놓여있는 것을 볼 수 있다. float를 지정한 요소는 문서의 흐름에서 벗어나 자기가 필요한 만큼의 자리를 차지했기 때문에 float에 영향을..

STUDY/CSS 2022.08.02

CSS : Background 배경

CSS : Background background 콘텐츠의 배경을 의미한다. 단축 속성으로서 색상, 이미지, 반복 등 다양한 하위 속성을 지정할 수 있다 background-color 색상은 키워드, RGB 색상 코드 혹은 RGB함수를 이용하여 지정할 수 있다. /* color : 키워드*/ p { color: red; } /* color : RGB 색상 코드 */ p { color: #ff0000; } /* color : RGB 함수 */ p { color: rgb(255, 0, 0); } background-image url() 함수를 사용하여 이미지 경로를 넣어준다. 이미지가 바둑판 형태로 반복되어 나오는데, 사용하는 이미지의 크기가 콘텐츠에 비해 작기 때문에 반복해서 나온다 (기본값임) 반복 형태..

STUDY/CSS 2022.08.02

CSS : box-sizing

CSS : box-sizing box-sizing 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다. 높이와 너비가 같더라도 box-sizing 속성 값에 따라 크기가 달라질 수 있다. content-box가 기본값이다. content-box 요소의 너비와 높이를 정의했을 때 콘텐츠 영역에 대해서만 값을 정의한다. padding이나 margin을 추가할 때 요소가 커져도 콘텐츠 크기는 확보하는 형태로 너비와 높이를 지정하고 싶을 때 사용 * { box-sizing: content-box; } div { width: 100px; height: 100px; background-color: #ffffb5; border: 1px solid black; } border-box 너비(widt..

STUDY/CSS 2022.08.01

CSS : Box Model (박스 모델)

CSS : Box Model (박스 모델) 박스 모델 Box Model 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성 (색, 배경, 테두리 모양 등)을 결정할 수 있다. 박스는 네 개의 영역으로 구성되며, 크기 지정을 할 수 있다. 콘텐츠 영역 (content) : 콘텐츠 너비(가로) : width 콘텐츠 높이(세로) : height 안쪽 여백 (padding) : padding: 0px 0px 0xp 0px; [상단 오른쪽 하단 왼쪽 순] padding-top padding-right padding-bottom padding-left 경계선 [테두리] (border) border-wid..

STUDY/CSS 2022.08.01

CSS : display & border

CSS : display & border display 속성 display 속성은 요소를 블록 요소와 인라인 요소중 어느 쪽으로 처리할지 정의한다. display에는 미리 정의되어 있는 키워드를 속성 값으로 지정한다. (block, inline, inline-block, none) none은 사용했을때 안 보이게 되는데 사라진 게 아니라 보이지 않게 하는 것이다. inline-block은 블록요소 속성 값이 너비와 높이를 지정해줄 수 있지만 인라인 요소에서는 콘텐츠 부분만 차지하기 때문에 높이와 너비를 지정해줄 수 없다. 그때, inline-block을 사용하면 높이와 너비를 지정할 수 있게 된다. /* 블록 레벨 요소인 div요소를 인라인으로 하고 싶을때 */ div { display: inline; ..

STUDY/CSS 2022.07.20

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color)

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color) font-family : 글꼴(font)을 지정한다. 요소를 구성하는 텍스트의 글꼴(font)을 지정한다. 글꼴(font) 명을 속성 값으로 지정한다. 여러 개의 글꼴(font)을 연달아 기입하여 우선순위를 지정할 수 있다. Courier를 우선으로 지정하되, 해당 폰트가 없을 경우 monospace 그다음 Times로 지정한다. * { font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif; } font-size : 수치와 단위를 지정해 글자(text)의 크기를 지정할 수 있다. px : 1px는 디스플레이를..

STUDY/CSS 2022.07.19

CSS : 버튼을 꾸미는 Border-Style CSS

CSS : 버튼을 꾸미는 Border-Style CSS /* 버튼 간격 설정 */ button { width: 100px; height: 100px; margin: 0px 5px 15px 0px; } /* 버튼 정렬하기 */ .buttonBox { display: flex; flex-direction: row; justify-content: center; } /* 하단부터 버튼 스타일링 */ .dotted { border-style: dotted; } .double { border-style: double; } .none { border-style: none; } .groove { border-style: groove; } .dashed { border-style: dashed; } .outset { b..

STUDY/CSS 2022.05.09

CSS : ::selection - 드래그 시 색상이 변경되는 태그

CSS : ::selection - 드래그 시 색상이 변경되는 태그 HTML 삽입 미리보기할 수 없는 소스 안녕하세요 저는 레슈 입니다. ::selection { background: #085467; color: #fff; } p::selection { background: #afa7bb; color: #fff; } ::selection 는 사용자가 선택한 영역에 스타일을 적용할때 사용한다. 허용되는 속성 color background-color text-decoration text-shadow fill-color,stroke-color,stroke-width

STUDY/CSS 2022.05.09