[공부] HTML/CSS(SCSS, Styled-Component, TailWind)

웹 개발 이해하기인터넷이란? 여러 대의 컴퓨터를 하나로 연결해주는 거대한 통신망(연결된 컴퓨터 간의 정보 교환을 위한 시스템)웹이란? 인터넷 상의 컴퓨터들 간에 정보를 공유할 수 있도록 해주는 네트워크 시스템글, 이미지, 영상 등 다양한 정보들을 효과적으로 제공하기 위

html의 태그 전체 구조<태그명>콘텐츠</태그명>여는 태그, 콘텐츠, 닫는 태그 구조로 이루어져 있다.단일 태그도 종종 사용한다.<태그명> <태그명 />위 구조로 이루어져있으며 br, hr 등이 있다.html의 속성값속성은 태그의 부가적인 기능

html은 문서 종류에 따라 각 역할에 맞게 구분한다.구분짓는 이유는 문서 정리의 편의성 때문이다.html : html 문서 구성head : 문서의 정보body : 화면에 표시될 내용head와 body는 아래와 같이 구분된다.

html의 태그는 각각 고유한 웹 요소가 있다.예를 들어 p태그는 블록 레벨 요소를 가지고 있어 자기가 속한 영역의 너비를 모두 차지하며span태그는 인라인 텍스트 요소를 가지고 있어 자기에게 필요한 만큼의 공간만 차지한다.블록 레벨 요소복수로 사용하면 다음 문단에서

meta 태그html 문서에 대한 메타데이터를 의미한다.head태그 안에 위치한 메타데이터란 html에 대한 정보를 뜻하며 문자 세트, 페이지 설명, 키워드, 문서작성자, 뷰포트 설명 등을 지정하는 데 사용된다.메타데이터를 사용하는 이유는 검색 엔진이 페이지를 검색할

웹 사이트 회원가입 페이지 html로만 만들어보기구성머릿말이미지개인정보웹사이트 체크박스제출 버튼웹사이트 하이퍼링크

css란'Cascading Stylesheet' 직역하면 연속적인 스타일 페이지라고 볼 수 있다.스타일을 정의하는 마크업 언어이며 태그와 태그가 중첩되어 연속적인 구조를 가진 html문서에 스타일을 추가한다.html이 다수의 태그로 구성되는 것처럼 css코드는 다수의

css의 사용 방법css문서는 독립적으로 존재할 수 있지만 html 문서와 함께 사용해야한다. css를 적용할 수 있는 html 문서가 존재하지 않으면 css 문서 또한 의미가 없어지는 것이다.라이브러리를 제외한 html에서의 css사용법은 총 3가지가 있다.인라인 스

html 태그와 css를 이어주는 선택자에 대해 알아보려고 한다.선택자는 여러가지 종류가 있으며 요소를 오직 하나만 선택할 수도 있고 동시에 선택할 수도 있다.선택자의 종류는 아래와 같이 있다."\*" : 전체 선택자. 문서 내 모든 요소를 선택태그명 : 태그 선택자.

html요소가 표출되는 브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다.따라서 그 안의 웹 요소들 또한 필수적으로 개별적인 너비와 높이를 가진다.가장 기본적인 요소라고 할 수 있는 너비와 높이를 '박스'라고 표현하며 이 박스 요소를 모두 포함해서 '박스 모델

박스 모델 중 하나인 테두리에 대해 공부해보려고 한다.화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시에 다른 요소와 쉽게 구분할 수 있게 해주는 영역이다.테두리 css를 사용할 때는 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으로 사용

테두리를 공부했으니 이제 테두리 안팎의 여백에 대해 공부해보려고 한다.박스 모델의 여백에는 4가지 면이 존재하는데 속성값 사용 개수에 따라 4면의 여백 크기를 달리 정할 수 있다.여백 4면 모두 적용 : margin: 10px순서대로 위아래, 좌우 여백 값을 지정 :

박스 모델의 배경 설정에 대해 알아보자.박스 모델의 배경에는 색상뿐 아니라 이미지 등 다양한 요소를 넣을 수 있다.여러가지 속성이 있으며 아래와 같이 이루어져 있다."background"(모두 동일하게 들어가므로 제외)-color : 요소의 배경 색상\-clip : 요

css의 색상 설정에도 여러가지 방법이 있다.키워드 : 색상을 나타내는 키워드rgb함수 : rgb함수에 수치를 입력해 색상 결정hsl함수 : hsl함수에 수치를 입력해 색상 결정16진수값 : 빨, 초, 파 비율을 16진수로 표현해 색상 결정색상 코드 예시

font-family텍스트의 글꼴을 정의할 때 사용하는 속성이다. 로컬에 있는 폰트를 사용할 수도 있으며 웹 폰트(웹에서 지원하는 폰트)를 사용하는 경우도 많다.위와 같은 구조로 사용하며 폰트명을 여러개 사용하는 이유는 가장 첫번째의 폰트가 지원되지 않을 경우 순차적

실습01: 자기소개 프로필 페이지에 스타일 시트 더하기 사용 css 실습02: 기존에 만들었던 회원가입 페이지 스타일 시트 더하기 사용 css 단 textarea 윗부분에 공백이 뜨는 문제가 생겼다. 혹시 margin-top문제인가 싶어 0값을 줘도 반응이 없었고 바로 위의 label도 0.5rem 정도의 값 밖에 없었기 때문에 저렇게 큰 공백이 생...

html 요소의 유형을 지정하는 display에 대해 공부하고자 한다.이전에 다뤘던 블록 레벨 요소나 인라인 요소와 같이 html요소가 차지하는 공간, 여백, 여백에 따른 타 요소들과의 정렬방식을 의미하는 것이다.요소의 유형에는 여러가지가 있으며 유형에 따라 요소를 원

웹 요소들이 화면에 표시되는 순서는 기본적으로 html문서 내에서 태그가 쓰여진 순서를 따른다. 하지만 이번 페이지에서 공부할 float는 html문서의 흐름을 무시하고 엘리먼트를 원하는 방식으로 '띄울' 수 있다. float속성은 문서의 흐름에서 제외시킨 채로 부모

position은 문서상의 요소를 배치하는 방법을 정의한다.position으로 요소 배치 방법을 결정하면 그 다음 top, left...로 최종 위치를 결정하며 해당 면에서 어느정도로 엘리먼트를 떨어트릴지 수치를 입력하면 된다.position 속성은 아래와 같이 있다.

position을 사용하다보면 요소가 겹치면서 보여야 할 요소가 가려지거나 겹치는 경우가 생긴다.보여야할 요소의 우선순위를 정하기 위해 z-index를 사용한다.코드 예시position을 지정한 요소에 한해서 우선순위를 정할 수 있다. z-index값이 높은 순서대로

앞서 공부했던 선택자(id, class, 태그명, 그룹선택자 등등) 이외에도 다양한 특성을 가진 선택자들을 더 공부해볼 예정이다.엘리먼트의 속성이나 하위요소, 자식요소 등등으로 선택 가능하다."속성명" : 특정 속성을 명시하여 요소 선택태그명+공백+태그명: 상위 요소에

항상 같은 css를 적용하는 것이 아닌, 특정 상태가 되었을 때만 css를 사용하고 싶은 경우도 있다.이러한 상황에 의사 클래스라는 것을 사용한다.의사 클래스(가상클래스)는 선택자에 추가하는 키워드로, 어떤 특정한 상태가 되었을 때 css를 적용하겠다는 의미이다.의사클

나만의 채팅방 만들기지금까지 배운 내용을 복습하기 위해 카톡과 비슷한 채팅방을 만들어 보았다.html코드css코드코드 작성 방식기존에는 html엘리먼트를 만들면서 css같이 병행하는 방식으로 만들었었다. 예를 들어 첫번째 container와 내부 컨텐츠를 만들고 css

이번 페이지에서는 웹 요소에 변형을 적용해 볼 예정이다.가끔 버튼을 누르거나 로딩 페이지가 뜰 때 웹 요소가 커진다던지, 늘어진다던지 등등 변형 되는 것을 본 적이 있을 것이다.웹 요소의 변형이란 요소의 크기나 위치를 바꾸는 것이며 요소의 x축과 y축을 기준으로 바뀌게

애니메이션 효과에 대해 알아보기 전에 transition과 키프레임은 무슨 차이가 있을지 궁금해져서 찾아보았다.transition은 요소의 변화에 초점을 맞춰 해당 요소의 상태가 변할 때만 애니메이션을 실행한다.키프레임은 요소에 프레임을 씌워 재생횟수, 재생 방향 등

css는 상속이 가능하다.예를 들어 ul 태그에 color 속성을 적용했다면 그 밑의 li태그는 해당 color 속성을 상속 받은 채 화면에 표출된다.하지만 모든 요소가 상속되는 것은 아니다.절대적인 것은 아니지만 text와 관련한 속성은 주로 상속이 되는 경우가 많고

반응형 웹이란 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 혹은 기법을 뜻한다.한 웹사이트를 pc에서 보는 것과 모바일에서 볼 때 구성과 디자인이 달라지는 것을 생각하면 된다.브라우저의 크기가 달라지는 것은 뷰포트(viewport)를 기준으로 판단

미디어 쿼리(media query)는 미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 모듈이다.만약 pc화면의 크기 조절(물리적)한다면 뷰포트 크기 변화를 인식해 그에 맞는 레이아웃으로 전환하는 모듈이라고 보면 된다.코드 예시

HTML를 꾸미는 CSS는 사용하기 편리하고 초보자도 배우기 쉽다는 장점이 있지만 코드를 깔끔하게 정리하기 어렵고 코드의 재사용과 유지보수가 힘들다는 단점이 있다.위 단점을 커버하기 위해 SCSS를 배워보려고 한다.SASS, SCSSSASS는 기존 CSS의 단점을 보완

CSS를 선택자의 구조가 복잡해지는 경우가 아주 많다.예를 들어 태그가 많이 중첩되어 3중 4중이 되었을 때 div > ul > li...이렇게 계속 써주는 방법도 좋지만 가독성이 좋지 않다.이 문제를 보완하기 위해 CSS도 HTML처럼 중첩해서 사용할 수 있는 기능이

MixinMixin은 @Mixin 키워드를 사용해 반복되는 값을 정리한다.Mixin은 개인적으로 함수 같다는 생각이 들었다. 함수와 같이 ()로 실행시키며 그 안에 인자를 넣어 속성값을 정의한다.그리고 속성값을 여러개 넣을 수 있어 아주 유용하다.중괄호를 열어 재사용할

CSS에는 일반적인 CSS, SCSS, 스타일드 컴포넌트, 테일윈드 등 다양한 방법이 있다.그 중 스타일드 컴포넌트는 React에서 사용되는 대표적인 CSS-IN-JS 라이브러리다.여기서 CSS-IN-JS란? JS 안에서 CSS를 작성하는 방식을 뜻한다.일반적인 CSS

이제 유튜브 예시를 통해 스타일드 컴포넌트를 적용해보려고 한다.스타일드 컴포넌트가 적용되어있으며 지원이 안되는 Mixin 기능을 사용하기 위해 따로 변수를 선언했다. 또한 props로 동적변환도 해보았다.useState를 사용해 다크모드 > 화이트모드로 전환되는 기능도

TailWindCSS테일윈드는 가장 대표적인 유틸리티-퍼스트(Utility-First) 프레임워크이다. 이미 작성된 CSS코드를 가지고 있으며 바로 코드에 클래스명으로 빠르게 적용할 수 있다.여기에서 유틸리티-퍼스트란 뭘까? CSS를 직접 작성해야하는 SCSS나 스타일