yOu gOOd ?!

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/data-* data-* - HTML: Hypertext Markup Language | MDNdata-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.developer.mozilla.org  하나씩 뜯어보자!container.dataset.maxRating 이게 뭐야? maxRating 속성은 어디서 왔어?이건 HTML의 data-* 속성과 관련이 있음! HTML 태그에는 우리가 직접 필요한 데이터를 저장하기 위해 data- 로 시작하는 속성..

1. :not() 의사 클래스 (Negation Pseudo-class):not()은 특정 조건을 만족하지 않는 요소를 선택함.괄호 안에 선택자를 넣어 해당 선택자에 해당하지 않는 요소에만 스타일 적용함.선택자:not(제외할_선택자) { /* 스타일 */}  제외할 선택자에 들어갈 수 있는 것:단순 선택자 (Simple Selector):타입 선택자 (Type Selector): div, p, span, a 등 HTML 태그 이름클래스 선택자 (Class Selector): .my-classID 선택자 (ID Selector): #my-id전체 선택자 (Universal Selector): *속성 선택자 (Attribute Selector): [type="text"], [data-value] 등일부 의..

폼 (폼푸린) Enter your name: Enter your email:  📌 action, method action양식 데이터를 처리할 프로그램의 URI 지정, , 요소의 formaction 특성으로 재정의 가능 method양식을 제출할 때 사용할 HTTP 메서드.post: POST 메서드. 양식 데이터를 요청 본문으로 전송get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송검색에 사용dialog: 양식이 안에 위치한 경우, 제출과 함께 대화 상자를 닫음, , 요소의 formmethod 특성으로 재정의 가능 Name: Save Name: Save Title ..

HTML 전역 속성전역 속성은 모든 HTML 요소에 사용할 수 있는 속성입니다. (일부 요소에서는 효과가 없을 수 있지만, 문법적으로는 사용 가능) 핵심 전역 속성accesskey: 요소에 대한 단축키를 지정합니다.브라우저 및 운영체제에 따라 단축키 조합이 다를 수 있습니다. (접근성 문제 유발 가능성)사용자에게 단축키 정보를 명확하게 제공해야 합니다. autocapitalize: (모바일 장치 가상 키보드) 텍스트 입력 시 자동 대문자 변환 방식을 제어합니다.off / none: 자동 대문자 변환 없음.on / sentences: 문장의 첫 글자를 대문자로.words: 각 단어의 첫 글자를 대문자로.characters: 모든 글자를 대문자로. autofocus: 페이지 로드 시 요소에 자동으로 포커스를..

역할: HTML 문서의 메타데이터를 담는 컨테이너.위치: 요소 바로 아래, 요소 앞에 위치.특징: 요소 내의 내용은 웹 페이지에 직접 표시되지 않습니다. 핵심 메타데이터 요소 역할: 문서의 제목을 정의.중요성:브라우저 탭, 북마크, 검색 결과에 표시되는 제목.검색 엔진 최적화(SEO)에 매우 중요.접근성 측면에서 스크린 리더 사용자에게 페이지 내용을 알려주는 역할.권장 사항:페이지 내용을 명확하고 간결하게 요약 (55-60자 이내).핵심 키워드를 포함.페이지마다 고유한 제목 사용.참고: 하나의 HTML 문서에는 단 하나의 요소만 존재해야 합니다. 역할: 다양한 종류의 메타데이터를 정의. name과 content 속성을 사용하여 정보를 지정.주요 사용 예:charset: 문자 인코딩 설정 (예: U..

📌 마크업 언어, 마크다운 언어상식선에서 접근 해보면 마크업은 기계가 읽은 언어 같고 마크 다운은 사람이 읽을 수 있게 글을 쓰는 언어라 생각된다. 개발자가 아닌이상 HTML 을 뜯어보지는 않으니까 ..벨로그, 깃허브 리드미, 요즘에는 티스토리도.그리고 노션도 ! 마크다운 언어를 사용한다.단순한 문법으로 꼭 필요한 내용만 쓸 수 있도록 해준다. 📌 마크업 언어 (Markup Language)텍스트에 태그를 사용하여 문서의 구조와 서식을 정의하는 언어.HTML (Hypertext Markup Language): 웹 페이지의 구조와 내용을 정의하는 데 사용하고, 태그를 사용하여 텍스트, 이미지, 링크 등을 구성하고 브라우저에 표시한다.XML (Extensible Markup Language): 데이터를 ..

한 달 뒤의 내가 이 포스팅을 다시 봤을때 저 간단한걸 왜 몰라 할 수 있기를 바라며 ...  문제상황 : 습관성 width: 100% 로 인한 이슈가 발생하였다.자식 요소가 부모요소 밖으로 튀어나올때!! 어떻게 해결을 보면 좋을까!!뭐가 문제여서 그런걸까!! 을 알자보자 싶어 그냥 이것저것 해보고 기록하는 글이다.  0. 실험 기본 상태0. box-sizing은 기본값이다.1. body의 가로크기는 800px 이다. 2. 부모는 body의 가로크기를 100%으로 받고 패딩 50을 가지고 있다. 3. 자식은 부모의 가로크기를 100%으로 받는다. 여기서도 이슈 발생. 엄마가 오른쪽으로 치우쳤다. 이것은 body의 가로가 800에서 마진이 오토값으로 중앙정렬 되어 있는 상태에서 엄마의 패딩이 50으로 설정..

마진이 겹치는 부분은 값이 큰 마진으로 해결 본다는 것. 배치 시 이웃하는 요소간, 부모 자식 요소간, 적용이 됨. 부모 요소에 overflow: hidden 을 주면, 자식요소가 부모 밖으로 나가지 못함. 부모 요소에 display: inline-block 값을 주면, 자식 요소의 마진값을 적용할 수 있음. 부모 콘테이너에 패딩을 주는게 가장 이상적인듯, ,, 하지만 박스 사이징을 보더 박스로 하는 경우에는 부모에 패딩주는 순간 마음이 안 좋아질수도 ,, 아니면 애초에 디자이너한테 정확한 값을 받아와서 챡챡챡.. 잘 하던가.. 말던가.. 겹치는 부분은 같은 값으로 마진을 줘서 나중에 봐도 의도적으로 마진을 줬음을 알게 하는 것도 좋은듯.. 아니면 마진은 아래로만 주는 형식으로 해결하던가.. 말던가.. ..

static은 기본값. relative 는 자기 자리에서 삐져나온다. 다른 요소들이 relative요소가 원래 있던 자리를 그대로 둔다. 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. absolute은 다른 친구들이 원래 그 차리를 침범 한다. -> 띨롱 나와서 엄마 곁에서 떨어진다. 부모의 relative요소를 찾아서 그 요소에 절대적인 값으로 위치를 조절할 수 있다. sticky는 자기 자리에 잘 있다가 사용자 눈에 띌라고 아주 발악을 한다 fixed는 문서에서 띨롱 떨어져 나와 고정되어 있다. absolute과 fixed는 원래 있던 자..

stacking context css 포지셔닝 등으로 인하여 요소가 겹쳐 졌을 경우 요소의 쌓임 순서(stacking context)를 정의할 수 있다. 자주 쓰이는 쌓임 맥락의 영향을 받는 요소는 다음과 같다. 문서의 루트 요소 () position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소 position이 fixed 또는 sticky인 요소 flexbox 컨테이너의 자식 중 z-index가 auto가 아닌 요소 grid 컨테이너의 자식 중 z-index가 auto가 아닌 요소 opacity가 1보다 작은 요소 z-index 속성의 값 auto 새로운 쌓임 맥락을 생성하지 않고 현재 쌓임 맥락에서의 위치는 부모 요소와 동일하다. 상수 한 자신만의 쌓임 맥락을 생..

다음은 속성의 "값"으로 쓰이는 것들임. 기본적으로 상속이 되지 않는 속성들 : backgound-color, backgound-image, background-repeat, border, display 등 주로 박스모델과 관련됨. 자연스럽게 상속이 되는 것들은 대체적으로 텍스트와 관련이 있음. 상속 inherit : 하위 요소가 상위 요소의 스타일 속성값을 물려받겠다는 것을 의미함. 부모 요소가 포함(containing) 블록이 아니더라도, 항상 문서 트리 내 부모 요소로부터 상속받게 됨. 초깃값 initial : 속성의 초깃값을 요소에 적용시킴. unset : 부모로부터 상속할 수 있는 값이 있으면 상속값을, 없으면 초깃값을 적용시킴.

backgrund-size 속성은 backgound-img 속성으로 지정한 이미지의 크기를 조절 할 수 있는 속성이다. 사용자 지정 값으로 설정 할수도 있고 키워드 값을 사용하면 편하게 설정할 수 있다. div 의 크키를 800px의 정사각형으로 만들고, 배경사진을 불러온 상태에서 backgound-size 속성을 키워드로 설정해보자. 설정한 원본이미지는 다음과 같다. auto (기본값) " 문서상으론 고유한 비율이 유지되도록 해당 방향으로 배경 이미지의 크기를 조정합니다. " 라고 되어있다. 이미지 자체에는 리사이징이 되어있지 않지만 컨테이너 크기에 맞게 조정되었다. contain 이미지를 자르지 않고, 부모의 크기 안에서 최대한 커진다. backgound-repeat 속성의 디폴트가 반복 이기 때문에..