반응형 HTML+CSS33 CSS 선택자 part. 1 - ID 선택자, Class 선택자, 자손 선택자 ID 선택자, Class 선택자, 자손 선택자 CSS 기능을 가지고 스타일링을 하는 단계로 접어들면, 선택자(Selector)라는 낯선 도구를 만나게 됩니다. 그런데 이 선택자들은 HTML 요소들에 대한 핸들링을 매우 편리하게 만들어주는 중요한 것들이죠. 낯설다고 그냥 넘어가지 말고, 이 참에 각각 비교해보고 정리를 해보도록 합시다. 아이디 선택자(ID Selector) 아이디 선택자는 CSS에서 가장 기본이 되는 선택자입니다. 선택자 우선 순위가 가장 높기도 하고 id는 웹문서에 1개만 존재할 수 있다는 점 때문에, 프론트 엔드 개발을 하면서 가장 빈번하게 사용되는 CSS Selector가 됩니다. 사용법은 다음과 같습니다. KINcoding 클래스 선택자(Class Selector) 클래스 선택자 또.. 2023. 1. 18. 가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 가상 클래스 선택자 Vs. 가상 엘리먼트 선택자 HTML 소스들을 살펴보다 보면, 가끔 :hover 또는 ::after 이런 것들이 눈에 띄곤합니다. 매우 낯선 모습의 요소들이지만 HTML, CSS에서는 매우 빈번하게 사용하는 중요한 선택자들입니다. 그런데 어떤 것들은 점 하나?이고 또 어떤 것들은 점이 두개?라서 점점 더 미궁으로 빠져드는 느낌이 들기도 합니다. 헷갈리면? 이참에 정리를 해보는 거죠 뭐. PSEUDO CLASSES - 가상 클래스 'pseudo'는 어떻게 읽을까요? 발음이 매우 낯설죠. [ suːdoʊ ]라고 읽습니다. 한국식 발음으로는 [수-도]에 가깝습니다. '가상의', '가짜의' 라는 뜻을 가지고 있는데, 파파고는 '사이비의'라고 좀 더 과격하게 알려주는군요^^; 일단 세미콜론 한.. 2023. 1. 17. CSS 선택자? 우선 '#', '.' 2개만 기억하세요 CSS 선택자(CSS Selector) CSS는 뼈대를 이루는 HTML 문서에 피부(또는 옷)를 입히는 역할을 해줍니다. 예쁘게 꾸며주는 역할을 합니다. 그래서 원하는 곳에 변화를 잘 주려면, 원하는 위치를 잘 콕~ 찝어 내는 게 중요해집니다. 프로그래밍 혹은 코딩이라는 건 결국 컴퓨터를 시켜서 '손 안대고 코를 푸는 것'입니다. 그래서 CSS를 이용해서 스타일링을 할 때에도 '무언가를 선택하는 일'은 매우 중요한 기능이 됩니다. section과 div 사용해서 의미론적으로 구분해보기 누구나 잘 알고 있는 를 이용해서 간단하게 HTML 문서를 마크 업 해보았습니다. 이번에는 section, div를 사용해서 의미론적으로 구분을 해볼 수 있도록 했습니다. 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보.. 2023. 1. 12. Form 전송에 대한 이해 기초(+ 매우 중요한 label 태그) Form 전송에 대한 이해 기초 html을 공부하다가 태그에 대해서 배우기 시작하면, 드디어 뭔가 프로그래밍 적인 단계에 들어서게 되는 느낌이 듭니다. 뭔가를 입력 받고 서버로 전송하고 할 수 있는 기능이 바로 태그의 역할이기 때문입니다. form의 사전적의미는 '입력양식'들을 의미하는데요, 사용자에게 입력 받게 되는 입력란들과, 그것을 서버로 전송하는 버튼은 모두 ~ 사이에 위치하게 됩니다. 버튼도 form 태그 안에 포함되어 있어야합니다.(Javascript를 사용하지 않는다는 전제하) 로그인창 UI를 이용한 예제 가장 흔하게 접할 수 있는 form 예제는 바로 화면일 것입니다. 사용자가 ID와 PW를 입력하고 버튼을 눌러 입력한 값을 서버로 전송하면, 로그인을 시켜줄지 말지를 실행하게 되죠. 아래 .. 2023. 1. 11. 이전 1 2 3 4 5 6 7 8 9 다음 반응형
