html / css

tab-size는 탭 문자의 너비를 지정해주는 속성입니다.HTML에서 탭 문자는 일반적으로 textarea 및 pre와 같은 일부 요소를 제외하고는 단일 공백 문자로 표시되며 탭 크기 속성의 결과는 해당 요소에 대해서만 표시됩니다.기본값: 8상속여부: O애니여부: XC

의미 있는 태그로 마크업을 해줌으로 협업에서의 이점직관성seo에서 좋은 점수접근성~ 효과를 기대할수있다.내용이 독립적이다\*\*하위 요소로 제목(h1~h6)나와야함\*\*해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화사이

overflow-wrap는 인라인 요소의 긴 단어가 넘칠 경우,줄바꿈 위해서 긴 단어 깨기 여부를 지정하는 속성입니다.normal: 단어쪼개기 X (즉, 단어 사이의 공백에서만 줄바꿈) (기본값)anywhere: 단어쪼개기 O (즉, 넘치면 언제든 줄바꿈.)break

line-height는 줄 높이를 정하는 속성입니다.normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다.length : 길이로 줄 높이를 정합니다.number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로

cursor 속성을 이용하면 해당 태그 위에 위치하는마우스 커서의 모양을 바꿀 수 있습니다.auto: 자동default: 기본값 (화살표)pointer: 손가락 모양 (클릭 가능한 버튼)wait: 로딩

모바일 페이지 작업을 할 때 크롬 모바일 모드나 일반적인 디바이스에서는문제없이 노출되던 텍스트들이 특정 디바이스 화면(몇몇 아이폰)에서 유독 크게 보이는 경우가 발생할 때가 있다.이러한 경우 영역이 깨지거나 원하는 페이지를 표현하는데에 어려움이 생긴다. 이럴 때 사용하

root 속성에 들어가는 요소중 생소한 것들이 있어공부할 겸 정리해둘 겸 작성해보려 한다!css root{ \-webkit-tap-highlight-color: transparent; \-webkit-text-size-adjust: 100%; text-si

글의 내용이 많을 때 ...으로 글의 줄임표현을 본적이 있다.많은 글의 내용을 다 담기 어려울 때 사용하기 유용한 표현방식인데자꾸 복사 붙여넣기를 하게 되어서 외워보잔 생각으로 정리를 해보려 한다!이것이 바...cssp { width: 6rem; text-ove

먼저, flex 속성은 flex-grow, flex-shrink, flex-basis를 한번에 나타낸다.밑에 나올 flex-basis(flex item의 기본 크기)보다 늘어날 수 있는지 결정하는 속성디폴트 값은 0으로, inflexible한 상태를 의미 (즉, 화면이

CSS Grid는 CSS Flex 와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다.컬럼(cloumn)은 열로우(row

\-display:flex가 있었어야함.!!!\*flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.\*flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.\*center: 요소들을 컨테이너의 가운데로 정렬합니다.\*space-between: 요소들 사

css의 class 이름을 어떻게 지어야 하며 어떨때 써야하는지 고민이 많이 될것이다.수업을 마치고 클래스 작명과 구분 방법에 대하여 공부 겸 정리를 하려고 한다.가장 많이 헷갈리는 div, article, section 구분에 대해 먼저 시작하려고 한다.HTML di

css 작업에 사용하면 유용한 요소인 속성 선택자!a태그에 target이라는 속성을 가진 요소를 선택한다.= <a href="= <a href="a태그에 target=”\_blank”라는 속성을 가진 요소를 선택한다.※ target이 반드시 \_blank인

웹 사이트를 제작하다보면 하나의 태그에 여러가지의 CSS가 적용될 때가 있다.그럼 이때 같은 요소에 다른 CSS 속성이 중복 설정되어 있다면 어떤 것을 우선 순위로 적용될까?아래의 순서를 참고해 보자!속성값 뒤에 !important가 붙어있는 속성인라인 스타일로(htm

이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다. 즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다.iOS의 폼 요소들에 부여되어 있는 둥근 테두리값이나 그림자 효과를 제거할때 사용할 수 있다.w

form 관련 요소들은 동적인 웹 페이지를 위해서는 반드시 필요한 요소들이다.로그인, 회원가입, 글쓰기 등 관리할때 사용되는 즉,폼안에 입력된 데이터를 서버로 전달해서 처리하도록 만들어주는 태그다.method : 폼을 전송할 방식으로 'post' / 'get' 두 가지

아래와 같은 상품 이미지란을 본 적이 많았을 것이다. 대부분 아래와 같은 상품을 들어가서 보려면 이미지를 누르거나,혹은 아래에 있는 텍스트를 클릭해서 들어가기 마련일 것이다. 하지만 위의 이미지 사이트(feat.안다르)는리뷰칸은 리뷰를 보는 다른 링크로 연결되어있는 독

문득 프로젝트를 하던 중 svg파일을 다뤘던 일이 있어서, svg 파일을 다루는 방법을 정리해보려고 한다. SVG SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 줄임말 다른 png과 jpg 이미지 파일에 비해 텍스트 편집기에서 C

<form> 요소는 폼(FORM)의 범위를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 <form> 요소에 의해 정의된

width나 height에 150px 등 고정값을 준다면 쉽게 정사각형을 만들 수 있다.하지만 반응형 웹페이지에서는 값을 %로 주기 때문에 문제가 생긴다.사용자가 보는 화면이 직사각형인데, 가로 길이가 30%, 세로 길이가 30%라고 해도 정사각형이 되지 않기 때문이다

해외 사이트를 구경하던 도중 사이즈를 조절하는 옵션 중 clamp라는 걸 발견했고, clamp를 공부 및 정리하며 작성을 하게 되었다.우리는 max-width, width를 사용해 요소의 너비 범위를 지정할 수 있다.아래 예시는 target의 기본 너비를 parent의

CSS 속성 clip-path는 대상이 되는 엘리먼트에 사용하여 circle, ellipsis, polygon(다각형) 등의 원하는 영역만 가위로 자른 것처럼 보여줄 수 있습니다. 쉽게 얘기해 네모난 모양의 엘리먼트를 원이나 별 모양으로 보여줄 수도 있고 아니면 자동차

dasharray, dashoffset의 속성, 선 길이를 구하는 간단한 함수를 이용해기초적인 애니메이션 효과를 학습할 수 있다!!codepenyeaseula/embed/rNZByEQ?default-tab=html%2Cresultstroke-dasharray : 점의

웹 페이지 특정 요소에서 스크롤이 작동은 하지만 스크롤은 보이지 않게 하는 방법에 대해 정리해 보겠습니다.test라는 id를 부여받은 div 요소가 있다고 가정하겠습니다.너비를 200px로 고정시켰고, 배경색은 하늘색을 넣어줬습니다. 이 div 요소의 높이를 한정시킨

CSS 구조를 가독성 있게 만들어주고 유지 보수가 편리하도록 만들어 주는 도구이며종류로는 SASS (SCSS), LESS, Stylus등이 있습니다. 저는 여기서 주로 많이 사용하는 SASS (SCSS)를 정리해보고자 합니다. 기존 CSS를 사용하다 보면 단순 반복되는

첫 코딩테스트를 진행하게 되었다.제시되는 모바일 사이트를 HTML / CSS / JS (바닐라)를 사용하여 2시간이라는 시간 내에 완성시켜야 했었다. ( 바닐라 자바스크립트는 더 공부해야겠다 ㅜ)결과는 참담했고, 자신있던 마크업과 CSS에서도내 스스로에게 한심하다 느꼈

SCSS ➡ CSS 컴파일 퍼블리셔들이 많이 사용하는 vs code에서 SCSS로 쉽게 작업하고 컴파일하고 html에 적용하는 방법을 정리해두려고 합니다. 참고로 SCSS는 웹이 직접 적용할수 없기 때문에 반드시 CSS로 컴파일한 후에(바꿔준 후) html에 적용해야