프론트엔드(25)
-
CSS에 대해서 적용하기 전에!
p { color: blue; /* 텍스트 색상 */ font-size: 16px; /* 글자 크기 */}안녕하세요! 이전글에 CSS에 대한 개요 및 설명에 대해서알아보았는데요, 이번엔 CSS를 실제로 시작하기 전에적용방법 및 기본문법, 케스케이딩에 대해서 설명드리고자 합니다! 혼자서 혼자만의 사이트를 만들고 유지하기위해서본인이 편한 방법을 사용하면 되는데, 프로젝트를 하여 협업을 하거나,제작 후 운영을 다른분께 인계하거나 할때지켜지면 누구나 유지운영하기 편하고 생산성도 높일 수 있다는 점 !(내가 받을때 안지켜지면 골치가 아파요...) 1️⃣ CSS 적용 방법CSS는 웹 페이지에 스타일을 적용하기 위한 다양한 방법을 제공합니다. 주로 3가지 방법으로 HTML에 CS..
2024.10.21 -
CSS란?
1️⃣ CSS란?CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어로, HTML과 함께 사용되어 웹 페이지의 디자인과 레이아웃을 제어하는 데 중요한 역할을 합니다. HTML이 웹 페이지의 구조와 콘텐츠를 정의하는 반면, CSS는 해당 구조에 스타일을 입혀 시각적으로 보기 좋게 만듭니다. 2️⃣ CSS의 주요 역할 레이아웃 및 배치 설정: CSS를 사용하여 웹 페이지 요소들의 배치 방식을 정의할 수 있습니다. 예를 들어, 글자를 좌우 가운데 정렬하거나, 요소들을 수직으로 배치하거나, 그리드나 플렉스 박스(flexbox)를 이용해 복잡한 레이아웃을 만들 수 있습니다.스타일링: CSS는 텍스트의 폰트, 크기, 색상, 배경 이미지, 테두리, 그림자 등과 같은 다양한 스타일을..
2024.10.21 -
HTML 이란? - aside 태그에 대해서 -10
오늘도 어김없이 찾아와서HTML에 대해서 정보를 공유하고자 나타났습니다! 자 오늘은 태그에 대해서 알아볼텐데요,이외 태그들은 한번에 몰아서 설명드리는 시간을 가지려고 합니다! 자 시작해볼까요? 1️⃣ aside 태그란? 태그는 HTML5에서 도입된 의미론적 태그 중 하나로, 본문 콘텐츠와 간접적으로 관련된 추가 정보나 부가적인 콘텐츠를 나타낼 때 사용됩니다. 이는 메인 콘텐츠와는 다소 독립적이지만 관련된 정보를 제공하는 요소들을 그룹화하는 데 적합합니다. 2️⃣ 주요 특징 부가 정보나 사이드바 역할: 태그는 주로 메인 콘텐츠와 간접적인 관련이 있는 정보, 예를 들어 광고, 관련 링크, 참고 자료, 저자 정보 등을 포함하는 데 사용됩니다. 흔히 블로그나 웹사이트의 사이드바에 사용되는 요소들이 태그..
2024.10.20 -
HTML 이란? - section 태그에 대해서 -9
안녕하세요 여러분!오늘은 어제에 이어 태그에 대해서 알아보고자 합니다! 1️⃣ section 태그란? 태그는 HTML5에서 도입된 구조적 요소로, 문서 내에서 관련된 콘텐츠 그룹을 나누기 위해 사용됩니다. 와 같은 일반적인 블록 요소와 달리, 태그는 의미론적 의미를 가지고 있으며, 특정 주제나 목적을 가진 콘텐츠를 나타내는 데 적합합니다. 2️⃣ 주요 특징 콘텐츠 그룹화: 태그는 하나의 주제나 목적을 가진 콘텐츠를 그룹화합니다. 예를 들어, 뉴스 기사, 블로그 포스트에서 각각의 섹션을 나눌 수 있습니다.의미론적 구조: 문서의 논리적인 구성을 돕습니다. 검색 엔진이나 스크린 리더와 같은 도구들은 태그를 통해 콘텐츠의 흐름과 중요도를 더 쉽게 이해할 수 있습니다.제목 요소와 함께 사용: 태..
2024.10.19 -
HTML 이란? - article 태그에 대해서 -8
쨔잔! 다들 잘지내셨나요?하루만에 묻기 어색하긴 한데요.. 아무튼 오늘은 태그에 대해서 알아보도록 하죠! 1️⃣ article 태그란? 태그는 HTML5에서 도입된 시맨틱 태그 중 하나로, 독립적인 콘텐츠를 정의할 때 사용됩니다. 은 문서나 웹 페이지 내에서 독립적으로 배포, 재사용 또는 참조될 수 있는 콘텐츠의 범위를 나타냅니다. 주로 블로그 글, 뉴스 기사, 포럼 게시물, 사용자 리뷰, 독립적인 설명 문서 등에 사용됩니다. 2️⃣ 주요 특징 독립적인 콘텐츠 블록: 태그로 감싼 콘텐츠는 문서나 페이지의 나머지 부분과 독립적으로 존재할 수 있는 내용을 의미합니다. 예를 들어, 블로그 포스트나 뉴스 기사와 같은 콘텐츠는 그것만으로도 유의미하며, 다른 곳에 재사용되거나 배포될 수 있습니다.시맨틱 의미:..
2024.10.18 -
HTML 이란? - main 태그에 대해서 -7
오늘 하루는 어떠셨을까요? 고된하루를 보내신 분도 계실거고비교적 순탄히 지나가신 분들도 계실거라 생각이 드는데... 이 모든 분들이제 글을 읽어주시기 위해 접속해주시다니..완전 럭키비키쟈냐 그럼 오늘은 태그에 대해서 알아보고자 합니다!다들 조금만 힘내셔서 다함께 알아보도록 해요 !! 1️⃣ main 태그란? 태그는 HTML5에서 도입된 시맨틱 태그로, 문서의 주요 콘텐츠를 정의할 때 사용됩니다. 이 태그는 웹 페이지에서 핵심적인 내용(본문)을 구분하며, 페이지에서 유일하게 한 번만 사용해야 하는 중요한 시맨틱 요소입니다. 2️⃣ 주요 특징 문서의 주요 콘텐츠를 정의: 태그는 웹 페이지나 애플리케이션의 주 콘텐츠 영역을 명확히 정의합니다. 주로 웹 페이지의 중앙에 위치하며, 해당 페이지의 주제를..
2024.10.17 -
FECONF 2024
지난 8월 24일 진행된 국내 프런트엔드 콘퍼런스 행사인 FEConf 2024의 발표 내용이 유튜브에 공개되었다.7가지 플랫폼 서버로 프론트엔드 버프 마법 걸기쉽고 편리한 E2E 테스트 자동화를 꿈꾸며...바퀴 대신 로켓 만들기10만 글로벌 유저들이 생겨버린 Three.js 사이드 프로젝트 ─ShaderGradient 개발기 (feat. 프레이머) 이 외에도 여러 흥미로운 주제들이 발표되었다. [FE News] 2024-10 by FE NewsRead on Substack
2024.10.16 -
HTML 이란? - nav 태그에 대해서 -6
안녕하십니까 !? 오늘 하루는 어떠셨을지 궁금하지만이렇게 제 블로그에 방문해주셔서 오늘이 어떻든 내일은 즐거운 하루가 되실거예요(꼭!) 오늘 하루는 태그에 대해서 알아볼 예정인데요,시작하기전 태그이름을 보고 조금씩 느끼시겠지만역할에 따라 이름이 지정되어있어요! 태그는 머리에 위치해있는 사이트에 대한 정보 등을 제공하고, 태그는 말그대로 페이지의 몸통! 콘텐츠부분을 담당하는데그 콘텐츠중 , 등역할 및 특성에 맞는 네이밍을 가지고 있다는점을 알고 지나가시면좀 더 수월히 교육이 되실것 같아요 !! 자 그럼 오늘의 주제 태그에 대해서 알아보고 가시죠! 1️⃣ nav 태그란? 태그는 HTML5에서 도입된 시맨틱 태그 중 하나로, 웹 페이지 내에서 주요 내비게이션 링크 그룹을 정의할 때 사용됩니다. ..
2024.10.16 -
HTML 이란? - header 태그에 대해서 -5
안녕하세요!오늘도 활기차게 HTML에 대해서 한번 알아볼까요? 이전시간에는시맨틱 마크업에 필수적인 태그중 하나인 태그에 대해서알아보았는데요, 이번에도 빠질 수 없는 태그인 내 웹사이트 Home About Contact 섹션 제목 이 섹션에 대한 소개입니다. 섹션의 본문 내용이 여기에 들어갑니다. 3️⃣ 주의 사항 태그 안에 다른 헤더 관련 태그(, , )를 중첩해서 사용하지 않도록 주의해야 합니다..
2024.10.15 -
[우아한 형제들] 셀러서비스실 세일즈서비스팀 웹프론트엔드 개발자
[조직소개]세일즈서비스팀은 사장님들이 더욱 쉽고 빠르게 배달의민족에 입점하는 것을 목표로 서비스를 만드는 팀입니다.수십만의 사장님들은 배달의민족에 입점하기 위해 계약서를 필수로 작성해야 합니다. 세일즈서비스팀은 사장님이 쉽게 입점할 수 있는 "입점신청 서비스"와 영업담당자가 사장님과 입점 계약을 할 수 있도록 "영업 관리용 입점신청 서비스"를 운영하고 관리합니다.또한 입점신청을 위해 작성한 계약서의 모든 정보는 입점에 적절한지 승인 과정이 필요합니다. 이를 위해 세일즈서비스팀은 내부 승인 정책에 맞게 요청-승인시스템을 구축하고 관리합니다. 뿐만 아니라 요청-승인 프로세스의 지연이 발생하는 구간에 주의를 기울이고, 업무 효율 증가 및 빠른 입점을 위해 개선 사항을 찾아 지속해서 시스템을 개선해 나가고 있습..
2024.10.14