본문 바로가기

HTML & CSS27

[ 크몽 전자책 ] 한눈에 볼 수 있는 웹 기초 용어 모음집 안녕하세요 PNcoding입니다 :) 오늘은 크몽에 업로드한 전자책을 소개해 드리도록 하겠습니다. https://kmong.com/gig/530379 한눈에 볼 수 있는 웹 기초 용어 모음집 - 크몽 PNcoding 전문가의 전자책 서비스를 만나보세요. 안녕하세요 PNcoding입니다.수업을 진행하며 많이 듣는 질문이 있습니다.“선생님 이 용... kmong.com 이 책은 웹을 배우는 데 있어 잘 모르는 단어들을 정리하여 만든 전자책입니다. 웹을 처음 배우시는 분들 중 새로운 단어들로 인해 적응을 하지 못하고 포기를 하는 경우를 종종 보았습니다. 또한 단어를 암기하는데 집중을 하다 보니 오히려 웹에 대한 관심도가 떨어지는 경우도 보았습니다. 그러한 분들을 위해 기초 용어를 모아둔 전자책을 집필하게 되었.. 2024. 1. 4.
[CSS 기초] flex 속성 안녕하세요 PNcoding입니다 :) 오늘은 레이아웃을 작성할 때에 유용하게 사용되는 flex 속성에 대하여 알아보도록 하겠습니다. Flex flex는 flexible box 혹은 flexbox라고 부르기도 합니다. flex는 CSS의 display 속성으로 지정을 해 줄 수 있으며, 기존에 웹페이지의 레이아웃을 작성할 때에 사용되었던 float나 inline-block 등을 이용한 방법보다 훨씬 유용하게 레이아웃을 작성할 수 있는 장점이 있습니다. Flex를 사용하기 위한 HTML 구조 flex를 사용하기 위해서는 반드시 부모요소와 자식요소가 필요합니다. 부모요소가 flex가 적용되는 영역이며, 부모요소 안의 자식요소들이 적용한 방법대로 배치가 된다고 생각하시면 됩니다. 첫번째1 222 플렉스3 부모요.. 2023. 12. 15.
[CSS 응용] 탭 메뉴 만들기 안녕하세요 PNcoding입니다 :) 오늘은 인풋태그를 활용한 탭메뉴를 만들어 보도록 하겠습니다. 인풋과 관련된 내용은 아래의 포스팅을 참고해 주세요 :) https://pncoding.tistory.com/36 [HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역 pncoding.tistory.com 바디구조 작성 1 (구조 작성) 먼저 바디구조를 작성해 보도록 하겠습니다. 탭1 탭2 탭1 내용 탭2 내용 인풋태그의 종류 중 radio를 사용하여 탭메뉴를 구성해 보도록 하겠습니다. 탭의 형.. 2023. 12. 12.
[CSS 기초] img태그와 background-image 차이 안녕하세요 PNcoding입니다 :) 오늘은 img 태그와 background-image의 차이에 대하여 알아보도록 하겠습니다. img태그나 배경이미지 관련해서 궁금하신 분들은 아래 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/13 [HTML 기초] HTML 태그 종류 (2) - img 태그, a 태그 안녕하세요 PNcoding입니다 :) 웹사이트에는 필수적으로 이미지가 들어가 있어요. 글자만 있는 사이트보다는 중간중간 이미지가 들어있는 사이트가 좀 더 이쁘게 보이며 사용자(유저) 입장에서 좀 pncoding.tistory.com https://pncoding.tistory.com/18 [CSS 기초] css 배경 속성 안녕하세요 PNcoding입니다 :) .. 2023. 12. 8.
[CSS 응용] 숨김 메뉴 만들기 안녕하세요 PNcoding입니다 :) 오늘은 인풋태그를 활용해 간단한 숨김메뉴 형태를 만들어 보도록 하겠습니다. 인풋태그가 궁금하신 분은 아래 포스팅을 참고해 주세요 :) https://pncoding.tistory.com/36 [HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역 pncoding.tistory.com 바디구조 작성 먼저 바디구조를 작성해 보도록 하겠습니다. = 인풋 태그 중 체크박스 기능을 활용하여 한번 체크하였을 때 메뉴박스가 보이도록, 한번 더 체크하였을 때(체크 해제 .. 2023. 12. 4.
[CSS 기초] CSS 적용 우선순위 안녕하세요 PNcoding입니다 :) 스타일을 적용시킬 때 있어서 어떤 때는 적용이 되고 어떤 때는 적용이 되지 않아 당황스러웠을 때 다들 있었을 거예요. 그 이유는 스타일시트의 특징 때문인데요. CSS의 C는 Cascading(캐스캐이딩)의 앞글자로서 캐스캐이딩은 '위에서 아래로 흐르는'이라는 뜻을 가지고 있습니다. 따라서 CSS는 '위에서 아래로 흐르는 스타일시트'라는 의미를 가지고 있습니다. 즉 이 캐스캐이딩의 의미에 따라 선택자에 적용된 여러 스타일 중에서 어떤 스타일이 우선적으로 적용이 될 것인지가 정해진다고 보시면 되겠습니다. 스타일 우선순위 기본적으로 나중에 적히는 css가 우선순위가 높음 !important > 태그에 직접 적용시키는 inline 방법 > id 선택자 > class 선택자 .. 2023. 11. 29.
반응형