# CSS

종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

13326개의 포스트

HTML/CSS (1)

안에 내용은 태그 안에 적어야 한다. 글제목은 태그 , 내용은 태그 안에 항목1 항목2 -> 리스트만들기! 리스트 예제 태그 안에 태그 넣을 수 있음.

약 6시간 전
·
0개의 댓글
·
post-thumbnail

Project 1. html,css로 간단한 웹페이지 만들기 (진행중)

생활코딩 강의에서 배운 html, css 개념을 복습하기 위한 목적을 가진 프로젝트이다!1\. 어떠한 웹페이지를 만들 것인가?\-> 친구들이랑 강릉 여행을 갈 때 사용할 웹페이지를 만들 것이다.2\. 어떠한 내용이 들어갈 것인가?\-> 맛집, 관광명소, 호텔에 관한 정

약 7시간 전
·
0개의 댓글
·
post-thumbnail

CSS로 X 버튼 그리기(feat.styled-components)

프로젝트에서 x버튼 디자인이 각각 다른 사이즈, 두께로 나와서 스타일 컴포넌트를 정의해 버튼 폭을 입력받아 만들도록 했다. 매번 비슷한 스타일 컴포넌트를 정의하지 않고 버튼의 크기와 선의 두께를 받아 그려주도록 만들었다. 세로로 서있는 직선 두개를 가상 요소 befor

약 8시간 전
·
0개의 댓글
·
post-thumbnail

[CSS] 파일 연결과 selector

<head></head> 안에 <link rel="stylesheet" href="파일명"/>을 작성하여 해당 css파일을 연결한다.selector는 대상을 선택할 수 있다.형태는 다음과 같다.클래스를 선택할 때는 클래스 이름 앞에 .을 붙인다.male

약 9시간 전
·
0개의 댓글
·

마우스오버효과 이미지에넣기

★ opacity:0 -> 1 (투명도) position:absolute; ★ https://codepen.io/1000mj/pen/ZEjqWew

약 9시간 전
·
0개의 댓글
·
post-thumbnail

[CSS] position 정리

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정한다.

약 10시간 전
·
0개의 댓글
·
post-thumbnail

[CSS] selectors 정리

css 선택자 총정리

약 10시간 전
·
0개의 댓글
·

HTML / CSS 공부

https://gymcoding.notion.site/HTML-CSS-706749085a29449bb066957e56686365

약 11시간 전
·
0개의 댓글
·
post-thumbnail

반응형 사이트 강의 TIL - 2

html5 shiv : ie6~8에서 새로운 태그 인식 시켜주기 위함 modernizr -> 현재 브라우저에서 뭘 사용할 수 있는지 확인 가능

약 11시간 전
·
0개의 댓글
·
post-thumbnail

SASS 개념 및 문법 정리

SASS는 CSS전처리로 이 외에도 less나 styles등이 존재한다. 웹에서는 CSS만 동작하기 때문에 CSS 전처리기는 직접 동작할 수 없다. 따라서 전처리기로 작성한 경우 CSS로 컴파일하는 작업이 필요하다.

약 11시간 전
·
0개의 댓글
·
post-thumbnail

[Web KIT640] Day 05. Firebase 및 node.js를 활용한 웹 페이지 배포

Introduction 정리 position : relative 요소 자기 자신을 기준으로 배치 position : absolute 부모(조상) 요소를 기준으로 배치 transfrom-origin 물체를 회전할 때 중심점을 결정한다. 기본 값은 center, ce

약 14시간 전
·
0개의 댓글
·
post-thumbnail

CSS 속성 단위(px, em, rem)의 선택과 웹 접근성

프론트엔드 개발자라면 무조건 숙지해야할 CSS 속성 단위 !

약 15시간 전
·
0개의 댓글
·
post-thumbnail

✏️웹개발을 배워보자 / transition , ::before ::after

transition , ::before ::after

약 17시간 전
·
0개의 댓글
·
post-thumbnail

CSS - 박스 모델/레이아웃/transform

#프론트엔드 #frontend #프론트엔드스쿨 #프론트엔드공부 #개발공부 #프론트엔드개발자 #취준일기 #취준기록 #취뽀 #빡공 #제로베이스

약 18시간 전
·
0개의 댓글
·
post-thumbnail

styled-components[React]

styled-components? 리액트에서 컴포넌트에 css 스타일링을 적용하기 위한 플러그인 css 요소를 자바스크립트 파일에서 한번에 관리 가능 Features 컴포넌트가 렌더링되는 요소에만 스타일 주입 -> 로딩시 필요한 코드 양 감소 클래스 네임 중복 문제를

약 18시간 전
·
0개의 댓글
·

[NextJs] styles.module.css 여러 클래스 사용하기

className 에 문자열 형태로 들어가게 만들어주면됨.백틱, 배열 등등.

약 20시간 전
·
1개의 댓글
·

BEM

BEM(Block, Element, Modifier) : css 방법론 중 하나로 이 외에 OOCSS, SMACSS 등의 방법론들이 있다.

약 21시간 전
·
0개의 댓글
·
post-thumbnail

코드스피츠 스터디 - CSS Rendering 1회차 정리 및 리마인드

히카맹 선생님의 코드스피츠 강의를 들으며 자바스크립트에 대한 이해를 높이기 위해 스터디를 하게 되었다. 이 포스팅은 그에 대한 정리글이다.히카맹 선생님의 코드스피츠 강의를 듣고 포스팅한다고 말한 지 어느덧 한달이다. 사실 다 듣고는 있었는데 (스터디를 하니까 .. )

어제
·
0개의 댓글
·

[CSS]강의 (1) Box

Box Model content 가로는 width, 세로는 height padding 안쪽여백 border 테두리 border: 굵기 스타일 색상 border: 1px solid black; border-top:1px solid bla

어제
·
0개의 댓글
·

styled-components에서 css 리셋 적용하는 법

styled-components에서 css 리셋하는 코드는 하기와 같다. styled-reset 라이브러리에서 css 부분만 가져와서 createGlobalStyle에 붙여넣어주면 된다. 참고: https://github.com/zacanger/styled-rese

어제
·
0개의 댓글
·