본문 바로가기

분류 전체보기

 (200)
HTML Semantic Tag를 적극 활용해야 하는 이유 웹 프론트엔드를 배우기 시작하면 가장 처음 공부하는것은 HTML입니다. HTML을 배우다보면 참 다양한 태그들을 배우게 되죠.제일 먼저 hello world를 찍기 위한 h1~h6, p, span 태그, 각종 기능을 가진 a, button, input 태그, 시멘틱 태그로 소개되는 header, main, footer, section, article 태그…하지만, 거의 모든 태그를 대체할 수 있는 무적의 태그가 있습니다. 바로 div 태그!div 태그만 있으면 테이블 레이아웃도 만들 수 있고, 섹션 분리도 가능하고, 버튼, 카드 등등 거의 대부분을 만들 수 있습니다.근데!! 왜 사람들은 시멘틱 태그를 사용해야 함을 강조하는걸까요?? 시멘틱 태그가 그렇게 중요한걸까요??네. 중요합니다.❓시멘틱 태그가 뭘까..
[CSS] display 속성 - none, inline, block, inline-block 💬 웹 파트 35기 최정완 입니다. 세미나 시간에 display 속성에 대해 배웠는데, 개념이 제대로 잡히지 않아다시 공부해보고자 display 속성을 주제로 포스팅을 하게 되었습니다.CSS에서 display 속성은 요소의 크기를 조정할 때 자주 사용된다.요소가 화면에서 얼마만큼 크기를 차지하고 싶을 지에 대해 고민할 때, display 속성이 자주 사용된다. 이번 포스트에서는 display의 4가지 속성값을 알아보려고 한다.  1. display: none;display: none; 속성값으로 none을 주면 해당 요소가 화면에서 사라진다. 크게 자체도 차지하지 않게 되기 때문에, 화면에서 요소가 안 보이게 만들고 싶을 때 사용할 수 있다. DOCTYPE html>html lang="en">head>..
스타일링 라이브러리 비교하기 최근 지인의 스타일링 라이브러리에 대한 개인적인 생각을 듣고 난 이후로 얻은 인사이트를 wavy 동기들에게도 공유하고 싶어서 글을 작성해봅니다. 마침 이번 주차 과제가 CSS 기본을 다시 생각할 수 있는 과제이기도 했구요! 🏊‍♂️CSS (Cascading Style Sheets)웹의 스타일링을 위한 기본 표준을 얘기하는 것으로, 모든 웹 브라우저에서 지원하는 스타일 시트 언어를 말한다 HTML 선택자 를 이용해서 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다.body { margin: 0; padding: 0; background-color: black;}장점표준 CSS 를 사용하여 개발한다면 전역 스타일링을 편리하게 적용할 수 있다.예를 들면, 모든 태그에 특정 스타일을 ..
CSS Flexbox 공부하자고? 너 누군데. 처음 웹 공부를 시작하면 가장 먼저 배우는 HTML과 CSS!그 중에서 프로젝트를 해도 헷갈리는 Flexbox 개념을 정리하려고 한다 💥 CSS Flexbox는 웹 페이지의 레이아웃을 쉽게 만들고 관리할 수 있도록 도와주는 1차원 레이아웃 모델이다.Flexbox를 사용하면 컨테이너 내에서 아이템의 배치, 정렬, 크기 조정을 간편하게 할 수 있다. Flex 속성을 적용하기 위해서는 부모와 자식의 관계가 존재해야 한다.Flex container → 부모flex-direction : 요소 배치 방향 선택 (row (default) / column / row-reverse / column-reverse)flex-wrap : 컨테이너 너비보다 아이템 너비가 클 때 줄바꿈을 결정하는 속성 (nowrap (줄바꿈..
공유과제#1. White space (CSS) 💡주제선정 계기: 1주차 과제를 구현하기 위한 속성을 알아보던 중 “white space”를 발견했다. 이름만으로는 어떤 기능을 하는지 가늠이 되지 않았을 뿐더러 조원들에게도 생소한 속성이었다. 따라서 “White space”에 대해 알아보게 되었고, 이를 파트원들과 공유하고자 한다.   1. CSS White-space 속성이란 : CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정한다. 이때 공백 문자는 문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자, 즉 ‘띄어쓰기’를 의미한다. 공백 문자를 사용함으로써 텍스트의 가독성을 높일 수 있다.  2.  형식 selector {white-space: /* value */}  3. 값  > normal: 대부분의 요소에서 초..
웹 접근성 향상을 위한 rem px대신 rem을 사용하는 게 좋다는 이야기는 많이 들어봤을 수 있다. 근데 왜?🚀 px, em, rem우선 폰트크기를 지정할 때 쓰이는 단위들에 대해서 알고 가자. px(pixel): 픽셀은 화면의 가장 기본적인 단위로, 고정된 크기를 가지고 있다. 즉, 항상 같은 크기를 나타내고 다른 요소에 영향을 받지 않는다.em: em은 현재 요소의 폰트 크기를 기준으로 상대적인 크기를 정의하는 단위이다. 부모 요소의 글꼴 크기를 따라 상대적으로 정해지게 된다. (부모요소의 글꼴 -> 16px / 자식요소의 글꼴 -> 1em 이면 자식요소의 글꼴은 16px)rem(root em): em과 마찬가지로 상대적인 크기 단위이다. rem 은 HTML 최상단 root요소의 글꼴 크기로부터 영향을 받아 em에 비해서 일관..
메타 태그를 통한 검색엔진 최적화(SEO) feat: 네이버 메타 태그 뜯어보기 웹 개발을 하다 보면 사람들에게 보여질 부분에만 치중하기 쉬워집니다. 그런데 알고보면 사람뿐만 아니라 기계가 웹사이트를 읽어야하는 경우가 의외로 많습니다. 여기서 기계는 유저가 사용하는 브라우저가 될 수도 있고, 웹사이트의 데이터를 수시로 수집해가는 검색엔진이 될 수도 있습니다. 또한 어떤 웹페이지의 링크를 공유하면 링크를 열기 전에 해당 콘텐츠를 미리보여주는 SNS나 메신저가 될 수도 있습니다.이번 포스팅에서는 이러한 기계들이 웹페이지를 효과적으로 이해할 수 있도록 도와주는 메타 태그에 대해서 알아보겠습니다.📌검색엔진 최적화(SEO) 정의검색엔진 최적화(SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다 라고, 위키백과에 정의되어있다. 간단히 말하면..
BEM 그게 뭔데! 안녕하세요 웹파트 김고은입니다. 오늘은 BEM에 대해서 포스트 작성해보려 합니다! BEM : class Naming 규칙을 알아보자  👀이전까지의 나의 모습 사실 class 작명과 관련해서는, 카멜 케이스나 스네이크 케이스 둘 중 하나로 통일성있게만 작성하면장땡 아닌가라는 생각으로 네이밍을 해왔다.// 카멜케이스🐫: 두 개 이상의 단어일 때, 맨 처음 단어를 대문자로 표기하는 방법CamelCase// 스네이크케이스🐍: _ 혹은 - 로 단어를 연결하여 표기하는 방법 snake_case    기업 바이 기업이겠지만, BEM를 사용하는 곳도 꽤 흔하게 찾아볼 수 있다. 자! 현업에서 사용할지 안 할지는 잘 모르겠지만 그래도 "아는 것이 힘이다" 라는 말처럼 뭐든 배워보자.  BEM 그게 뭔데요? BEM ..

티스토리툴바