1주차 (28) 썸네일형 리스트형 공유과제#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 .. 이전 1 2 3 4 다음
