profile
공부 정리용 블로그

css 가상 요소 몇 가지 정리

가상 요소는 html에는 존재하지 않는 태그이나 css에서 선택하고 스타일링 할 수 있는 요소이다.가상 요소를 선택할 때는 ‘:’을 두 개 붙인다.\-> 말 그대로 첫 번째 글자를 선택한다.\->첫 번째 줄을 전부 선택한다.이라면 p태그의 모든 첫 번째 줄을 선택하게

2022년 7월 19일
·
0개의 댓글
·

페이지 콘텐츠 쉽게 중앙 정렬하는 팁

간혹 페이지를 만들다가 콘텐츠를 전부 중앙 정렬하고 싶어했으나 CSS rule에 의해 잘 안되는 경우가 있는데, 이 경우에 중앙 정렬을 쉽게 하고 싶다면 body의 모든 태그를 div태그로 묶은 후 이 태그에 width 및 margin을 설정해주면 쉽게 모든 콘텐츠를

2022년 7월 19일
·
0개의 댓글
·
post-thumbnail

validation 관련 속성들

이러한 email type의 input요소는 잘못된 양식의 이메일이 들어왔을 경우 박스 자체적으로 검증과정을 거쳐 경고 메시지를 보낸다. 이 검증을 없애고 싶다면 form 요소에 novalidate 속성을 추가하면 된다.이 속성은 불리언 속성(파이썬의 bool값으로 생

2022년 5월 23일
·
0개의 댓글
·
post-thumbnail

textarea 요소와 드롭다운 사용하기

이는 여러 줄을 입력 받기 위해 사용하는 요소이다. 특이한 점은 컨텐츠가 없는 빈 태그임에도 관습적으로 종료 태그를 같이 써준다는 점이다.cols와 rows는 박스의 크기를 지정해준다.또한 여기에 입력한 후 인풋을 제출하게 되면 user-message=dsfadsf%0

2022년 5월 22일
·
0개의 댓글
·
post-thumbnail

라디오 버튼 사용/체크박스 추가

사용자가 옵션 중 한 가지만 선택하도록 해야할 때는 name을 전부 같게 지정해준다. 또한 각각의 옵션에 하나씩 input을 할당해주어야 한다.하지만 input은 블록요소이기 때문에 배치가 잘 맞지 않고, 각 input에 대한 서버로 전송되는 데이터도 지정해주지 않았다

2022년 5월 22일
·
0개의 댓글
·

input요소의 다양한 type속성

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프자주 사용하는 type의 여러가지 종류들이다.input type=”text”: 디폴트 값. 이는 한 줄의 텍스트를 인풋으로 받는다. 여기서 ‘한 줄’이란 개발자가 딱히 제한하지 않는 이상 원

2022년 5월 22일
·
0개의 댓글
·

html 폼 스타일링

form요소가 있든 없든 웹페이지의 구성은 변하지 않는다고 한다. 어쨌든 스타일링은 할 수 있다. input은 form의 크기에 따라 동적으로 바뀌게 하기 위해 100%로 width를 설정했고, 나머지는 그냥 입맛에 맞게 하면 된다. input의 box-sizing은

2022년 5월 22일
·
0개의 댓글
·
post-thumbnail

CSS변환(transformation)과 전환(transition), svg

기본 개념:css변환: 요소의 모양을 이동하거나 변경하는 것. 자주 써봤던 :hover 의사 클래스를 사용하여 마우스를 요소 위로 올렸을 때 CSS가 달라지는 것을 생각하면 될 듯하다.css전환: 초기 상태에서 변환된 상태로 변하는 css변환 방식을 지정.css변환은

2022년 5월 21일
·
0개의 댓글
·
post-thumbnail

:root, html, *선택자 비교

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프html선택자는 html파일의 최상위 요소인 html요소를 선택한다. 이 선택자에 추가하는 CSS 규칙은 html에 적용되고, html 안의 다른 요소에도 상속된다.문서의 최상의 요소를 선택

2022년 5월 21일
·
0개의 댓글
·

CSS변수

찾아보니 CSS 변수와 CSS 사용자 정의 속성은 같은 뜻인 것 같다.https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties강의에서 제대로 된 개념을 알려주지 않아 mdn을 참고했다.

2022년 5월 21일
·
0개의 댓글
·

웹페이지 구상 시 고려할 사항

요즘에는 페이지와 페이지의 컨텐츠에 좌우 간격을 주는게 관례이기 때문에 모든 공간을 컨텐츠로 채우는 것은 좋지 않다. 컨텐츠가 담긴 전체화면을 로드할 수 있도록 염두하고 작업해야 한다.또한 웹페이지를 구상할 때는 항상 컨텐츠에 필요한 것보다 더 많은 공간을 할당해 두어

2022년 5월 21일
·
0개의 댓글
·
post-thumbnail

Z-index 속성

position 속성을 사용하면 요소를 문서흐름에서 벗어나게 하여 위치를 변경할 수 있다. 이렇게 위치를 변경했을 때 어떤 요소가 어떤 요소보다 더 위에 있는지 알 수 있도록 해주는 것이 Z-index속성이다. xyz축에서 그 z축이라고 이해하면 될 듯 하다.기본값은

2022년 5월 20일
·
0개의 댓글
·

내부링크와 target 가상 선택자 사용하기

햄버거 아이콘은 스마트폰에서 흔히 보이는 가로줄 세 개가 세로로 쌓여 있는 아이콘을 말한다.https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0\_%EB%B2%84%ED%8A%BC목표는 미디어 쿼리를 사용하여

2022년 5월 20일
·
0개의 댓글
·

미디어 쿼리 사용하기

출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프미디어 쿼리는 @media로 시작한다. @media는 브라우저에 미디어 유형에 대한 정보 혹은 사용자가 사용하는 장치 유형과 사양 정보를 수집하라는 명령을 내린다고 한다. 수집한 정보를 바탕

2022년 5월 20일
·
0개의 댓글
·

텍스트에 em, rem단위 사용하기

h2요소에 를 줬을 때 정확히 얼마나 되는 크기인지 확인하려면 개발자도구의 computed 탭으로 가면 된다. 맨 밑에 18px이라고 나와있는데 이는 크롬의 설정에서 폰트 크기를 변화시키면 똑같이 변하는, 즉 브라우저 기본 값이다. 왜냐하면 h2의 부모 요소에 font

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

em, rem단위

px은 크기가 고정되어 있기 때문에 동적으로 변하는 단위가 필요하다.%: 부모 요소의 크기에 상대적으로 바뀌는 단위. 이러한 종속적인 성질 때문에 구조가 복잡해질 수록 다루기가 어려워진다.em: 부모 요소의 글꼴 크기를 따라가는 단위. 다른 속성의 맥락에서 이 단위를

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

반응형 디자인 관련 px단위 문제

픽셀은 이해하기 쉽다. 하지만확장할 수가 없다. 장치의 폭을 넓혀도 여전히 그 픽셀을 유지한다. 사용자 포커스도 제한되어 있다. 즉 픽셀을 사용하면 브라우저에서 사용 가능한 사용자 정의 옵션 일부가 제한될 수도 있다.오른쪽은 크롬 설정에서 들어간 글꼴 맞춤 설정이다.

2022년 5월 19일
·
0개의 댓글
·

유니코드 UTF-8 적용하기

빈 html코드에 !을 치고 엔터를 눌렀을 때 나오는 메타요소 중에는 가 있었다. 이것은 현재의 HTML 페이지에 적용된 표준 문자열로 브라우저나 HTML이 특정 문자들을 어떤 기기나 플랫폼에서도 이해할 수 있게 해준다.이는 보여지는 결과가 숫자나 문자와는 다를 수도

2022년 5월 18일
·
0개의 댓글
·

CSS grid

플렉스 박스와 똑같이 그리드도 CSS의 기본 기능이다. 플렉스 박스는 1차원 레이아웃에서, 그리드는 2차원 레이아웃에서 쓰인다.그리드 사용하기그리드 또한 플렉스 박스처럼 먼저 컨테이너를 생성한다. 컨테이너는 내부에 있는 각각의 항목의 부모 요소가 된다.를 속성으로 추가

2022년 5월 18일
·
0개의 댓글
·

오버 플로우 이해

c언어에서의 오버플로우 같은 개념인 줄 알았는데 그냥 오버 플로우 속성이 있는거였다.왼쪽 위를 보면 이미지가 컨테이너를 벗어난 것을 확인할 수 있다. 이를 통제하기 위해서는 overflow라는 속성을 사용한다. 이 속성은 컨테이너의 자식에는 적용되지 않고, 컨테이너 자

2022년 5월 17일
·
0개의 댓글
·