Multi Developer SuHo

안녕하세요~ 최근 눈이 내려서 도로가 많이 미끄럽죠? 걸으실 때, 급하게 나가실 때 조심하셔서 미끄럽지 않도록 주의하시면 좋겠습니다. 이번에는 보일러 플레이트와 index 파일의 사전적 의미를 이해하는 시간을 갖게 되겠습니다.  보일러 플레이트란? (Boilerplate code) 프로그래밍에서 반복적으로 사용되는 기본적인 코드 틀을 말합니다.  보일러 플레이트를 왜 사용할까요?  프로그래밍에서 반복적인 작업을 줄이고 개발 효율을 높이기 위해 사용합니다.  인덱스 파일(index.html 등 같은)이란?  특정 디렉토리나 파일 시스템의 시작점을 나타내는 파일입니다. 웹 개발에서 가장 흔하게 사용되는데, 웹 서버가 특정 디렉토리를 요청받으면  기본적으로 index 파일을 먼저 찾아서 실행합니다. index..

안녕하세요~ 오늘은 디스플레이 속성과 간단한 포지션 속성에 대해 알아보겠습니다. 디스플레이(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 라는 속성의 ..