Multi Developer SuHo

안녕하세요~ 이번에는 반응형과 적응형 , 미디워 쿼리(media query)에 대해 알아보겠습니다. 간단한 이론과 실습 코드로 설명해드리겠습니다. 반응형과 적응형이라고 들어보셨나요?  반응형과 적응형의 개념부터 살펴보시죠 반응형이란?반응형 : PC 사이즈와 모바일 사이즈로 변화하는 것이 아니고 접속한 디바이스를 판단해서 요청 URL이 달라질 수 있다. 현재 웹사이트 대부분마다 반응형으로 디바이스 규격에 따라 레이아웃이 다르게 나타납니다.  적응형이란?적응형 : PC 사이즈에서 모바일 사이즈 혹은 탭 사이즈로 변환될 때 화면 사이즈에 비례해서 페이지의 내용이 맞게 변화한다.미디어 쿼리(media query)란? 웹 페이지가 보여지는 기기의 종류나 화면 크기에 따라 스타일을 다르게 적용할 수 있도록 해주는 ..

안녕하세요~ 오늘은 디스플레이 속성과 간단한 포지션 속성에 대해 알아보겠습니다. 디스플레이(display) 속성우리가 디스플레이라고 화면 보통 TV를 떠오르시거나 화면을 생각하시게 됩니다. 맞습니다. CSS에서 display 속성은HTML 요소가 화면에 어떻게 표시될지를 결정하는 중요한 속성이고,  이 속성을 통해 요소의 크기, 위치, 레이아웃 등을 조절할 수 있습니다그럼 간단한 display 속성의 값에 대한 개념을 소개하겠습니다.display : block; 요소가 차지하는 공간을 완전히 채우고, 다음 요소는 새로운 줄에서 시작합니다.  전에 배웠던 블록 태그 아시나요? 같은 맥락이라고 생각하시면 됩니다. display : inline; 요소가 텍스트처럼 한 줄에 배치됩니다. 하지만 인라인 요소는 높..

안녕하세요 요즘 날씨가 점점 추워지고 있습니다. 감기가 유행이니 환절기 조심하세요~~ 🤧🤧 😷😷이번에는 결합자와 간단한 스타일 속성 들을 간단하게 배워보고 넘어가겠습니다. 우선 결합자에 대한 개념을 짚어보겠습니다. 결합자란? 👈여러 개의 선택자를 연결하여 더욱 정확하게 HTML 요소를 선택하고 스타일을 지정하는 방법입니다. 결합자 종류 div p {} 자손 결합자.a .b {} 자손 결합자div > p 직계 자식 결합자p + div 인접 결합자p ~ div 형제 결합자자손 결합자 👈첫 번째 선택자의 후손 요소를 모두 선택합니다. 즉, 자식, 손자 등 모든 하위 요소를 포함합니다.표기 방법 : 공백으로 표기  첫 번째 단락 두 번째 단락  div p { color: blue; /..

안녕하세요 멀티 개발자가 되고 싶은 수호입니다.  오늘은  CSS에서 선택자와 결합자의 종류를 알아보겠습니다. 어려운 내용을 덜어드리면서 최대한 쉽게 설명해볼려고 노력중입니다ㅠㅠ 이해해주셨으면 합니다. 🫢🫢선택자의 종류 중 대표적인 3가지를 소개해보겠습니다. 우선 선택자의 대한 개념부터 살펴보시죠선택자란?🤔🤔 웹 페이지에서 특정 요소를 선택하여 스타일을 입히는 것을 말합니다. 말 그대로  "선택한 요소에다 스타일을 적용시킨다" 라는 것이죠. 태그 선택자, 클래스 선택자, id 선택자로 세 가지 종류가 있습니다. 각각 선택자 사용방법이 다르기 때문에 예시 코드를 보여드리면서 설명하겠습니다. 1. 태그 선택자태그 선택자란? 🤔🤔HTML 태그 이름을 직접 사용하여 해당 태그의 모든 요소를 선택합니다..

안녕하세요~ 이번에는 HTML과 CSS를 사용하여 간단한 게시판을 만들어 보았습니다. HTML 코드  게시판 글쓰기 번호 제목 작성자 작성날짜 ㅁ 10 제목입니다. 작성자 2024-01-20 9 ..

안녕하세요~ 이번에는 CSS 문법과 선택자, 결합자에 대해 알아보겠습니다. 먼저 CSS 문법입니다.문법은 어디에서나 쓰입니다. 영어에서도 문법이 있듯이  CSS에서도 문법이 있습니다.  CSS 에서 문법이란?웹 페이지의 디자인을 꾸미는 CSS라는 언어를 사용할 때 지켜야 하는 규칙들을 말합니다.CSS 문법 기본 구조 /* 선택자 { 속성: 값;} */ 보통 이런 구조로 되어 있습니다. 여기서 선택자는 선택할 요소의 이름이 올 수 있고, HTML의 태그요소가 올 수도 있습니다.  속성에는 다양한 속성들이 있고 해당 속성의 값을 지정하거나 합니다.  예를 들면 이런식으로 말이죠 CSS 문법 기본 구조 예시   a { display : block; }" 태그의 diplay 라는 속성의 ..