반응형 👨💻개발/html&css5 CSS combinator(결합자) html에서 id나 class로 선택 안 하고 tag로만 선택할 수 있는 방법을 알아볼 거예요. combinator(결합자)를 이용하는 방법이에요. 총 4가지 방법이 있어요. 1️⃣ (space) - 부모 밑에 있는 모든 자식 태그! ex) div (space) span div 태그의 자식 태그인 span 모두가 선택이 돼요! 2️⃣ > - 바로 밑에 자식 태그 ex) div > span div 태그 바로 밑에 첫 번째 span 태그만 선택이 돼요! 3️⃣ + - 붙어 있는 형제 태그! ex) div + address div 바로 붙어 있는 address 태그가 선택이 돼요! 4️⃣ ~ - 떨어져 있는 형제 태그! ex) div ~ footer div랑 붙어 있지는 않지만 footer 태그도 선택! 2023. 2. 4. [CSS] display 속성 3가지(block, inline, flex) css를 공부를 했어요. display 속성을 공부하면서 3가지 value를 알게 됐어요. 1️⃣ block 2️⃣ inline 3️⃣ flex 1. block block의 대표적인 태그는 이에요. 옆에 아무것도 올 수 없어요! 2. inline inline의 대표적인 태그는 이에요. 옆에 올 수 있고, 높이와 넓이를 갖지 못해요! 패딩은 사방에 다 줄 수 있지만 마진은 위아래는 적용이 안돼요! 3. flex box block과 inline의 한계를 극복하고자 나온 개념이에요. flexbox를 이해하려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 돼요. 주축은 flex-direction 속성을 사용해 지정할 수 있어요. 디폴트 값은 row(주축, 가로, 인라인 방향)에요! 그럼 교차축은 col.. 2023. 2. 3. 가독성 좋은 웹사이트 위한 CSS 레이아웃 알아가기(position, display) 화려하고 가독성 좋은 웹사이트를 만들려면?? 최근 웹사이트들을 보면 화려하고 가독성이 좋다. HTML, CSS, 자바스크립트를 활용해서 만들어야 한다. 웹사이트의 뼈대가 되는 HTML, 동적인 웹사이트를 위한 자바스크립트도 중요하지만 화려하고 가독성 좋은 웹사이트의 기본이 되는 건 CSS 레이아웃이다! 레이아웃이 잘 잡혀 있어야 글, 도형, 여러 가지 기능이 자기 자리에서 빛을 낼 수 있다. CSS 레이아웃에는 잘 짜기 위해서는 position과 display을 이해하고 넘어가야 한다. 먼저 position은 웹에서 element가 배치되는 방식을 결정한다. Value에는 static, relative, absolute, fixed가 있다. 1. stactic - 브라우저에 기본으로 설정되어 있는 값이다.. 2022. 10. 19. Semantic Web과 Semantic Tag의 중요성 개발자 공부를 시작하고 웹에 대해 배웠다. 문제에서 이런 질문을 던져 줬다. "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요." HTML과 CSS를 이해함에 있어 태그는 매우 중요한 개념이다. 웹사이트는 태그로 시작해서 태그로 끝난다고 봐도 된다. , 태그를 사용해서 똑같은 결과물을 얻을 수 있다. 차이점을 이해하려면 필요한 개념이 Semantic Web과 Semantic Tag이다. Semantic을 사전에서 찾아보면 "의미의", "의미론적인"이라는 뜻이 나온다. 의미 있는 웹과 태그다. 단순히 생각하면 같은 결과물(시각적)을 얻기 때문에 의미는.. 2022. 10. 17. HTML 기초 'tag' HTML에 대해 알아보자! 부트캠프 '위코드'에서 개발공부를 시작했다. 개발을 위해 처음 배우는 것이 HTML이다. 위키피디아에 정의된 HTML은 아래와 같다. HTML(HyperText Markup Language)은 웹 페이지를 표시를 위해 개발된 마크업 언어이다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하여 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹의 뼈대이다. 제목, 단락, 목록, 이미지, 오디오, 영상 등을 넣을 .. 2022. 9. 23. 이전 1 다음 반응형
