# CSS

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

16959개의 포스트

[CSS] CSS 방법론 - BEM 방식

1. BEM이란? BEM은 CSS 제작 방법론으로 일종의 네이밍 컨벤션이다. Block(블록), Element(요소), Modifier(수정자)의 약자로, 목적에 따라 네이밍 하는 것이 특징이다. UI를 독립된 블록으로 분리함으로써 복잡한 페이지에서도 간단하고 신속하게 개발을 수행하는 것이 목적이다. > ## 코딩 컨벤션이란? 코딩 습관을 통일해서 작업상의 가독성을 높여 일의 효율을 높이기 위한 내부적인 공동의 약속. 1-2. BEM의 특징 명시도를 균일하게 유지하기 위해 class 선택자만 사용한다. 목적에 따라 네이밍한다. HTML 요소들을 각각 Block__Element--Modifer세가지로 분류한다. 1-3. BEM의 장점 목적과 기능을 명확히 전달할 수 있다. 요소의 구조를 효율적으로 전달한다. CSS 명시도를 항상 낮은 수준으로 유지하기 때문에 구체성으로 인한 코드의 길어짐을 방지할 수 있다. 2. Block, Ele

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

[인터랙티브 웹 페이지 만들기] 8장 | 기업형 웹 페이지 제작하기

기업형 웹 페이지 작업 폴더 준비하기 레이아웃 구조 파악하기 ` 태그안에 메뉴, 태그 안에 태그를 활용한 비주얼 영억, 가운데 태그에는 콘텐츠 영역, 마지막 `태그에는 기업 정보 header 영역 완성하기 `태그로 그룹을 묶고, 자식인 태그에 클래스명 inner`를 추가해 로고, 메뉴와 같은 실제 콘텐츠를 가로 가운데로 정렬해 줄 그룹을 만든다. 웹 페이지 제목인 로고를 `` 태그로 작성. 로고 아래 주 메뉴인 `태그를 생성하고 id를 gnb`라고 설정 > 실무에서 기업형 웹 페이지를 제작할 때 주 메뉴의 아이디명을 'gnb'라고

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

CSS 기초 내용 정리

CSS란 Cascading Style Sheets 의 줄임말로 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이고 보통 HTML 문서를 시각적으로 꾸미는 용도로 사용한다. css는 선택자, 선언, 속성 이렇게 세 가지로 이루어져 있다. 선택자는 html 문서상에서 각 태그들을 식별할 수 있게 붙여놓은 이름을 선택자로 활용할 수 있다. ex) sematic tags, class("."), id("#") CSS 방법론 <h4 id="작명-규칙naming-conven

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

Flex와 Grid의 차이

Flex와 Grid의 차이 flex는 1차원(선형) 레이아웃으로 컨텐츠를 수직 또는 수평으로 표현하기에 적합하며 grid는 2차원(매트릭스) 레이아웃으로 수직과 수평을 모두 표현하기에 적합하다. 다음 그림은 flex와 grid의 레이아웃을 나타낸다. flex를 사용하면 적합한 레이아웃 >1차원 수평 정렬 : header >1차원 수직 정렬 ![](https://velog.velcdn.com/images/yhy5049/post/686940f9-2768-4b6f-a8c1-d3aad37

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

[번역] HTML, CSS, JS, NodeJS로 온라인 이미지-PDF 변환기를 만드는 방법

원문 : https://www.freecodecamp.org/news/build-an-online-image-to-pdf-converter-with-html-css-js-nodejs/ 온라인 이미지-PDF 변환기는 이미지를 PDF로 변환할 수 있도록 도와주는 웹 사이트입니다. 이 도구는 이미지를 효율적으로 저장할 수 있는 방법을 제공하므로 유용합니다. 이 튜토리얼에서는 HTML, CSS, 자바스크립트 및 NodeJS를 사용하여 온라인 이미지-PDF 변환기를 만드는 방법을 알아봅니다. 목차 전제 조건 [프로젝트 설정](https://velog.io/@surim014/build-an-online-image-to-pdf-conv

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

미래에도 사용할 수 있는 Modern CSS

CSS 변수 CSS 변수는 재사용하는 값을 변수로 사용할 수 있게 합니다. 변수는 마지막에 전체 문서나 모든 요소를 참조하는 루트 의사 선택자(root pseudo selector)에서 정의됩니다. fallback (대안) 사용자가 정의한 파일을 가져오는 걸 잊었다거나 하는 경우처럼 어떤 이유로 변수가 설정되지 않을 때를 대비한 대체 값입니다. 벤더별 접두어 (Vendor Prefixes) 벤더별 접두어(Vendor Prefix)는 브라우저 공급자가 새로운 기능을 정식으로 제공하기 전에 구 버전의 브라우저에서도 그 기능을 무사히 구현하도록 합니다. 만약 벤더별 접두어를 사용하지 않는다면, 표준이 바뀌거나 최종 확정되어 전부 동일한 명세(specification)로 구현할 경우 flex 값이 갑자기 덮어 쓰여서 예전과 다르게 작동하면서 초기에 이 기술을 적용한 여러 웹사이트

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

드림코딩 클론코딩 유튜브 사이트 따라 만들기

드림코딩 유튜브에 올라와 있는 클론코딩하면서 배운 것을 기록하는 게시글입니다. root 의사 클래스 root 의사 클래스에 공통적으로 중복하여 사용할 만한 css 값을 미리 변수화해 놓습니다. 문서 공통 설정 root 의사 클래스와 마찬가지로 일반적으로 하는 설정들도 미리 태그에 작성해 놓습니다. 레이아웃 계획 먼저 세우기 이미지 출처: 드림코딩 유튜브 클론코딩할 유튜브 페이지는 크게 4개로 나눌 수 있습니다. 드림코딩에

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

[WEB] 반응형 웹

반응형 웹 > 반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 사이트를 이루는 소스 코드는 하나지만 접속하는 스크린 크기에 따라 레이아웃을 유동적으로 보여줄 수 있다. 테스크톱, 태블릿, 스마트폰 등 다양한 전자기기로 웹에 접속을 할 수 있게 되면서 여러 가지 버전의 웹페이지를 만들어야하는 경우가 발생하게 되었고 반응형 웹페이지가 탄생하게 되었다. 반응형 웹에는 사용자 경험을 디자인할 때 모바일일 경우를 최우선으로 초점을 맞춰서 디자인하는 모바일 퍼스트(mobile first)라는 개념이 있다. 반응형 웹의 특징과 장단점 반응형 웹의 특징 반응형 웹 디자인은 유연한 레이아웃으로 다양한 스크린 사이즈의 디바이스에 적응할 수 있으며 하나의 URL을 기반으로 화면이 바뀐다. 모바일로 연결되는 별도의 U

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

[TIL] 반응형 이미지

반응형 이미지 반응형 이미지란 화면 크기, 해상도 및 기타 기능이 여러 디바이스에서 잘 작동하는 이미지를 말합니다. 이미지 출처 https://tenor.com/view/responsive-web-design-gif-13156874 반응형 이미지가 필요한 이유 좁은 화면에서 헤더 이미지가 화면 높이를 많이 차지하는 경우나 콘텐츠 이미지를 확인하기 힘든 경우가 있습니다. 다양한 레이아웃에 대해 서로 다른 자른 이미지를 제공하려고 하는 것을 아트 디렉션이라고 합니다. 또한, 모바일 화면인 경우 큰 이미지를 삽입할 필요가 없습니다.(대역폭 낭비) 반대로, 작은 이미지는 원래 크기보다 크게 표시되면 깨지는 경우가 있습니다. 벡터 이미지가 이런 문제를 어느 정도 해결할 수 있지만

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

HTML, CSS/day22 / 23.09.21(목) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축

day01_text 00_struct.html 01_h-tag.html 02phr_br-tag.html 03_특수문자.html 04_글자모양.html 05_a-tag.html 06_a-inbase.html 07_quiz.html 07_quiz-favorites.html 08_img-tag.html 해당 작업 폴더에 이미지 폴더 넣기

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

[오딘 프로젝트] 반응형 디자인

반응형 디자인 소개 반응형 디자인이란 무엇입니까? > 모든 디바이스에서 작동하는 무언가를 만들기 위해 브라우저의 크기의 변화에 반응하는 웹 사이트를 만들 때 사용되는 용어입니다. 자연스러운 반응성 뷰포트 메타 태그 > >``태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있다. > 고정 너비를 피해야 하는 이유는 무엇입니까? > 고정 너비를 정하면 그 너비 이하로 줄어들 수 없기 때문에 width를 max-width나 min-width로 바꾸는 것이 좋다. 고정 높이를 피해야 하는 이유는 무엇입니까? > 화면이 작아질 때 해당 div 안의 콘텐츠가 넘칠 수 있다. height를 min-height로 변경하면 해결된다. margin과 padding을 사용하면 내부 콘텐츠의 내용에 관계없이 요소를 유연하게 유지할 수 있다. 어떤 상황에서 고정된 높이나 너비를

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

HTML, CSS - eclipse /day22 / 23.09.21(목) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축

VS Code 설치 및 설정 설정 파일 생성 단축키 !+enter 코드가 잘 실행 되는지 확인하기 위해서 서버가 필요한데 vs code는 live server 이 있음 >우클릭 > open with live server 탐색기 창 단축키 : ctrl + b Eclipse enterprize version 사용해야 함 tomcat 서버가 필요함 사용 : tomcat https://tomcat.apache.org/download-90.cgi C드라이브에 저장 ![](https://

어제
·
0개의 댓글
·

[MWU] Week12_Day2 공부 요약

📌TagMark 프로젝트 > - UI 초안 > - 간단하고 직관적인 디자인 선택 > - 검,흰,노 조합의 색 디자인 > - 북마크 관리 웹 페이지 제작 > - React 또는 Vanilla JS 사용 예정 > - 피그마 > 📱계산기 앱 > ### 2주차 예정 > - 기능 구현 완료 > >[깃

어제
·
0개의 댓글
·

img tag auto

auto가 default 값이라는 것만 알고 auto에 대해서는 크게 생각을 안했는데 img tag에 width, height에 auto를 지정해 주는 코드가 많았음. 어차피 default값으로 auto인데 굳이 지정해 주어야하나라는 생각에 정리 공부. > auto란? 브라우저가 해당 요소의 속성 값을 자동으로 계산해주는 것이다.예를 들어 margin에 0 auto를 주어 width 값이 정해 기준에 따라 좌/우 여백의 크기를 같게 설정 디바이스에 종류에따라 보이는 것이 다르게 보이게 해준다. 즉, margin의 auto는 width값에 따라 브라우저가 좌/우 여백의 크기를 같게 자동으로 계산해주었다. img tag img tag에 height: auto에 코드를 보왔다. width 값을 정해주었으면 heigth: auto는 default값으로 알아서 지정되니 auto를 굳이 쓸 필요가 없다고 생각했으나 큰 오해이다. 이유는 HTMLImageElement의

어제
·
0개의 댓글
·
post-thumbnail

[WEB FRONT] 시험 - 23.09.21

9/21(목) UI 구현 : (HTML + CSS) + JS Portfolio-test.html Portfolio-test.css Portfolio-test.js * [ 구현 화면 ] *

어제
·
0개의 댓글
·
post-thumbnail

Box Model, Display, Positioning

Box Model CSS는 모든 엘리먼트는 여러 겹의 상자로 둘러 쌓여 있다고 가정한다. 모든 HTML요소는 사각형의 박스 모델이고 위에서 아래로 (Block Level), 왼쪽에서 오른쪽 (Inline Level)으로 쌓인다. 컨텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구분. 컨텐트를 정렬 또는 위치를 지정하기 위해 Padding, Margin 속성을 활용 Margin 마진 속성은 Box의 마진 영역 너비를 지정 값이 1개일 때 모든 면에 적용. 값이 2개이면 첫번째 값을 {top, bottom}, 두번째 값을 {right, left}에 적용 값이 3개이면 첫번째 값을 {top}, 두번째 값을 {right, lef

어제
·
0개의 댓글
·
post-thumbnail

CSS 정복하기

CSS CSS 기본 스타일 우선 순위 스타일 적용 우선순위 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 CSS 상속 CSS는 상속을 통해 부모 요소의 속성을 자식 요소에게 상속 시킨다. 상속되는 속성 Text 관련 : font-family, font-size, font-weight, line-height, text-align opacity, visibility, color, list-style, white-space 상속되지 않는 속성 Box Model 관련 : width, height, margin, padding, border, box-sizing, display Position 관련 : position, top/right/left/botton, z-index, overflow, float background, vertical-algin, text-decoration

어제
·
0개의 댓글
·
post-thumbnail

Tailwind CSS를 알아보자

테일윈드(Tailwind CSS)란 무엇인가요? 테일윈드(Tailwind CSS)는 현대적이고 강력한 CSS 프레임워크로, 웹 개발자들이 쉽게 사용할 수 있는 CSS 스타일을 제공합니다. 테일윈드의 가장 큰 특징 중 하나는 클래스 기반 스타일링입니다. 이것은 HTML 요소에 클래스를 추가하면 스타일을 적용할 수 있다는 개념입니다. 테일윈드의 장점 1. 빠르고 쉬운 개발 테일윈드는 빠르게 웹 페이지를 개발할 수 있는 도구입니다. 클래스 기반 스타일링을 사용하므로 CSS 코드를 작성하는 시간을 절약할 수 있습니다. 필요한 스타일을 클래스로 추가하기만 하면 되기 때문입니다. 2. 일관된 디자인 테일윈드는 사전 정의된 스타일 클래스를 제공하여 일관된 디자인을 쉽게 유지할 수

어제
·
0개의 댓글
·
post-thumbnail

[새싹X코딩온] 풀스택 웹 개발자 과정 1주차 회고 | CSS(1)

1. CSS 1-1. CSS란? 웹 페이지를 디자인하기 위해 사용하는 언어 1-2. CSS 참조 방식 인라인 방식 태그의 속성 방식으로 사용 한눈에 보기 힘들며, 재사용이 불가능하다. ex) hello 내장 방식 head태그 내부에 style 태그를 선언하여 사용한다. 한 문서에서 같은 스타일이 가능하지만 다른 HTML 문서에서는 재사용이 불가능하다. 링크 방식 별도의 CSS 파일을 만들어서 HTML 파일에서 CSS 파일을 불러와서 사용한다. ex) link rel="stylesheet" href="./css/css_1.css"> >

1일 전
·
0개의 댓글
·
post-thumbnail

[인터랙티브 웹 페이지 만들기] 7장 | 온라인 프로필 카드 제작하기

온라인 프로필 카드 작업 폴더 준비하기 구글 폰트 CDN 폰트 어썸 CDN 레이아웃 구조 파악하기 section.wrap으로 전체 프로필 카드의 그룹 자식 요소로 상단 메뉴 링크 nav.menu 프로필 정보 article.profile 연락처 목록은 ul.contact 다른 4개의 프로필 이동 링크 영역 nav.others 배경과 프로필 카드 모양 잡기 상단 메뉴 영역 완성하기 프로필 영역 만들기 연락처 목록 완성하기 멤버별 프로필 링크 버튼 만들기 선택한 프로필 카드의 버튼만 활성화시키기 멤버별 프로필 완성하기 ![](https://velog.velcdn.com/images/tnscjs01/post/bc2b9639-d95f-

1일 전
·
0개의 댓글
·