Jerry

[css 10초 컷] :last-child Selector와 :nth-last-child()입니다. :last-child 선택자는 상위(부모) 요소의 마지막 하위(자식) 요소를 가리킵니다. :nth-last-child(n) 선택자는 타입이나, 상위(부모) 요소와 관계없이, n번째 하위(자식)의 모든 요소를 가리킵니다. p:last-child은 p:nth-last-child(1)와 같습니다. 참고 https://css-tricks.com/almanac/selectors/l/last-child/#:~:text=The%20%3Alast%2Dchild%20selector%20allows,with%20parent%20and%20sibling%20content. https://www.w3schools.com/css..

[css 10초 컷] margin: 0 auto (수평 가운데 정렬)이 안 되는 이유될 때 margin: 0 auto는 상하에는 0값, 좌우에는 auto값을 주는 것을 의미합니다. 1. HTML 파일에서 선언이 제대로 되었는지 확인합니다. 2. 해당 요소의 가로 사이즈가 설정되었는지 확인한다. 설정 안 되어 있다면, width를 지정한다. 왜냐하면, auto는 자동으로 사이즈를 설정해주기 때문이다. 3. 해당 요소의 display 속성이 inline 속성인지 확인한다. 2번의 내용과 같은 맥락으로, inline 속성은 자신만큼 영역값만을 가지기 때문이다. 4, 차지하고 있는 요소가 이미 해당 가로 공간을 차지하고 있는지 확인한다. 참조 https://ofcourse.kr/css-course/%EC%88%..

[css 10초 컷] CSS Selectors 입니다. CSS에서 셀렉터는 스타일을 주고 싶은 요소를 선택할 때 사용하는 패턴입니다. 우리가 HTML에서 원하는 요소에 스타일을 주려고 할 때, 어떻게 했나요? 네. Class나 Id 속성을 활용하죠. 또한, 해당 태그명에 대해 직접 선언할 수도 있고, ::before나 ::after를 활용한 가상 선택자도 선택할 수 있습니다. 이 중, 두 개의 클래스를 활용해서 원하는 요소를 선택하는 다중 선택자을 살펴보겠습니다. 형태는 .class1.class2와 .class1 .class2가 존재합니다. (띄어쓰기 차이입니다) 좌는 붙어있고 우는 띄어져 있습니다 좌는 class1과 class2 둘 다 같은 클래스 속성안에 있는 요소를 모든 요소를 선택합니다. 우는 c..

[css 10초 컷] HTML Entities 입니다. HTML에선 몇몇 문자들은 예약이 되어있습니다. 만약, "" 같은 표시를 사용한다면, 브라우저는 그것들을 태그와 혼합할 수 있습니다. 문자 엔티티들은 HTML에서 예약된 문자들을 보여주기 위해 사용됩니다. 좀 전에 이야기한, "

[css 10초 컷] list-style 입니다. list-style 속성은 모든 list 속성들에 대해 아래 속성들의 축약형입니다. - list-style-type : list marker의 타입에 대한 속성 - list-style-position : list marker의 위치 - list-style-image : list-marker 자리에 무엇이 들어갈지 속성 끝! 참고 https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_list-style https://www.w3schools.com/cssref/pr_list-style.asp

[css 10초 컷] display: list-item 입니다. list-item 키워드는 해당 요소(element)에 ::marker라는 유사 요소(일명, 수도;pesudo-element)를 생성하여 list-style 속성을 부여합니다. 무언가 어색하고 처음 보는 내용인 거 같지만, 이 syntax는 html, css 공부를 조금만 하셨으면 다 알만한 놈입니다. 바로, li 태그입니다. li 태그를 사용하면 해당 텍스트 앞에 나오는 점(mark)이 나오는 그 녀석입니다. 아래 코드 예시(code snippet)에 대한 결과를 보면, display 속성에 block 속성일 경우와 list-item 속성일 경우가 다르다는 것을 쉽게 알 수 있습니다. 끝! Have a good day! Have a goo..

lwc에서 자주 만나는 태그 중인 하나인 template 태그에 대해서 간략히 정리해보려고 합니다. 템플릿 태그는 루트 태그가 있는 유효한 HTML입니다. 컴포넌트가 렌더 될 때, 이 템플릿 태그는 식 같은 컴포넌트명으로 바뀝니다. 예를 들어, 템플릿 태그를 가진 myComponent.html 컴포넌트는 로 렌더됩니다. 여기서, c는 기본 네임스페이스 속성입니다. 템플릿 태그로 활용할 수 있는 몇 가지 방법이 있습니다. 먼저, if:true|false={property} 지시어를 이용하여 데이터를 바인딩하거나 제거할 수 있으며 These are the details! DOM 요소에 삽입할 수 있습니다. (DOM 조작) // helloConditionalRendering.js import { Lightni..

오늘은 HTML에 대해서 알아보겠습니다. HTML is the standard markup language for creating Web pages. HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. HTML 정의를 큰 글씨로 적어보았습니다. 이외에도 HTML를 정의하는 여러 내용들이 있습니다. HTML stands for Hyper Text Markup Language => HTML은 하이퍼 텍스트 마크업 언어를 의미합니다. HTML is the standard markup language for creating Web pages => HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. HTML describes the structure of a Web page => HTML은 웹 ..