# CSS

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

10982개의 포스트

[Front] onFocus 이벤트

해당 svg 버튼을 눌렀을 때 탭창이 뜨게 구현하고자 함OnBlur 이벤트와 OnFocus 이벤트가 작동하지 않음찾아보니OnFocus 이벤트는 대화형 요소에만 작용함대화형 요소 : a, button, details, input, select, textarea이외의 요소

방금 전
·
0개의 댓글
·

최종 프로젝트 피드백 이후 프론트엔드 수정 작업 내역(진행중)

프론트엔드 개선 작업?프론트엔드 조언 듣기전체 색상 수정폰트 교체컨셉에 맞춘 디자인 수정레이아웃 재배치디테일 요소 수정VER.1.2.1를 완성하고, 설문조사를 통해 사용자 피드백을 받았음팀의 지인, 몇 가지 커뮤니티에 설문조사를 요청한 결과, 대부분 프론트엔드에 대한

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

Web Header 구성

nav와 div.navbar로 전체적인 틀을 잡고 안에 div.navbar-inner를 통해서 전체적으로 배치

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

시작하기.

HTML CSS 부터 자바스크립트 등 .. 꾸준히 업데이트 하면서 많이 배우려고해요. 블로그를 보다가 부족한 점이 있다면 언제든 누구든 조언해주신다면 감사드리겠습니다 :)디자인학과를 졸업하고 UI/UX 디자이너의 꿈을 꾸다. 더 큰 꿈을 위해 나아가는 중이에요.앞으로

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

[SPARTA CODING] Web Development - Week 4 HW

서버를 다뤄보자 읏차 읏차 👾

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

[CSS]자식, 후손 선택자 그리고 이건 뭐라고 부르나요 ?

자식 선택자, 후손 선택자, 그리고 이건 뭐야...?

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

CSS 속성 - 박스 모델

CSS 속성 중 박스 모델에 관한 내용입니다.

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

220808 TIL

✔️ CSS Layout이번에 알아볼 것은 개발 환경에서 쓸 수 있는 기능에 대해 알아보겠다!그건 바로 line 에 이름을 붙이는 것이다.저번 코드를 수정해본다면...전에는 grid-template-colums 값을 repeat(4, 100px) 로 지정해두었지만, 이

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

Google 메인화면(html+css)

구글 메인페이지 만들기 ㄷㄷㄷ(보이는 화면이 전부..)이정도면 네카라쿠차 카카라쿠차 ssap 가능?

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

[CSS] - 박스 모델

박스 모델 구성 속성: margin, border, padding, content박스 모델이란?👉 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념마우스 오른쪽 클릭 혹은 F12를 누르면 박스 모델 영역 확인 가능👉 박스 모델에서 가장 외부에 있는 영역으

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

CSS 작성시 속성 순서

css 화면에 구현만 되면 되지! 라는 안일한 생각으로 처음 퍼블리싱 공부할 때 좀 중구난방으로 적었는데, 회사가서 많이 정리가 되었다고 생각하면서도 그래서 정확히 어떤 순서로 적는게 맞는거지 라는 궁금증이 있었다. 그러나 현실적으로 그걸 찾아서 정리해서 적용하는게 생

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

[html&css] 가상 클래스 / 가상 요소

가상 선택자 CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데

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

팀 프로젝트 두번째- 4주차 1일 - 대구 A.I. 스쿨

22-08-08Resoft 회사 사이트 리디자인 된것 만들어오기.팀 명: 보람 3조오늘 멘토링 시간에 나왔던 개선점을 정리해 보았다.서브 페이지 가로 스크롤 생기는것 없애기.시간이 되면 서브 페이지 반응형 안한것 하기.각자 파트를 어디 했는지 적고, 어떻게 디자인과 다

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

CSS Flexbox

CSS Flexbox에 대한 공부

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

[CSS] Float를 사용해 레이아웃을 잡을 때 부모영역 처리하기

float 프로퍼티란, '부유하다'라는 뜻. 블록 속성의 엘레먼트에 부유속성을 부여하여 레이아웃을 배치하는 방법이다. 자식 엘레먼트에 float: left를 사용하게 되면 부모영역이 높이값을 파악하지 못해 잘리는 문제가 발생하게 되는데!

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

styled-components vs. emotion

리액트에서는 CSS-in-JS을 통해 스타일을 작업을 진행한다.그중에서는 styled-components, emotion이 가장 유명하고 많이 사용된다.그래서 우리 모던 애자일 4기 프론트에서는 어떤 라이브러리를 사용할지 선택하기 위해 각각 어떠한 특징과 장점, 단점이

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

[Tailwind] 가상 클래스(pseudo class) odd, even 사용하기(ft.map 메서드)

CSS에서 nth-child(odd), nth-child(even)로 사용했던 홀수번, 짝수번 요소의 스타일 설정을 Tailwind에서는 어떻게 할까?순서에 따라 다른 스타일을 적용하고자 하는 그 태그에 odd와 even을 사용하면 된다.일반 CSS와 다를게 하나도 없

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

[Tailwind] 이미지 hover시 확대 효과

쇼핑몰 등의 웹사이트에서 이미지에 마우스를 올리면 이미지가 약간 확대되는 효과를 흔히 볼 수 있다.이 효과는 어떻게 만들면 될까?Tailwind 문법으로 작성했다고 해서 일반 CSS와 다른 것은 없다.필자는 div -> img 순서로 감싸줬다.div는 이미지가 보일 크

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