CSS 10

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 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 : 텍스트 꾸미기 속성 (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 : 100 DAYS CSS CHALLENGE (100일 CSS 챌린지)

CSS : 100 DAYS CSS CHALLENGE (100일 CSS 챌린지) 100일동안 해당되는 CSS를 넣어서 실력을 쌓을수있는 홈페이지이다. 꾸준히 문제를 풀다보면 CSS 스킬이 늘어날거라 믿고 열심히 하는중 https://100dayscss.com/ 100 Days CSS Challenge 100dayscss.com What is This? 과 How can i join?으로 들어가면 웹페이지에 대한 설명과 사용법이 적혀있다. 100days challenge를 참여하려면 코드펜(Codepen)아이디가 있어야한다. Codepen은 웹에디터인데 코드펜이 어떤건지 금궁하신분은 아래글을 읽어주세요. 2022.04.08 - [TIL/tip] - IDE : 웹 에디터와 통합개발환경(IDE) IDE : 웹 ..

STUDY/tip 2022.05.10

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

CSS : CSS Cascading Style Sheets

CSS : Cascading Style Sheets CSS 란? - CSS ( Cascading Style Sheets ) 프로그래밍 언어나 마크업(Mark-up) 언어가 아닌 스타일시트(Style Sheet) 언어이며, 스타일시트 언어는 HTML 문서에 있는 요소들을 선택적으로 스타일링할 때 사용하는 언어이다. 최신 버전은 CSS3이며, 과거엔 CSS1, CSS2, CSS3등 버전을 업데이트할 때마다 추가되는 기능이 있었으나, CSS3이후에는 CSS범위가 엄청나게 넓어짐으로써 여러 CSS모듈 사이의 차이도 너무나 커졌다. 그래서 W3C는 CSS의 버전을 올리지 않는 대신 주기적으로 CSS의 업데이트 현황을 생성하고 있다. (현재 최신 버전은 CSS3이며, 그 이상 버전이 올라가지 않을 예정이다.) 사용..

STUDY/CSS 2022.05.09