업장 업장

밑줄 스타일은 text-decoration 속성으로 쉽게 스타일링할 수 있는데, 해당 속성에 애니메이션이 적용되진 않습니다. 대신 background 속성을 활용한 밑줄 애니메이션을 알아보겠습니다. 1. 기본 밑줄 background-image: linear-gradient로 밑줄을 만들어줍니다. 초기엔 background를 그리지 않다가 hover 시 background를 그려냅니다. 기본 밑줄을 만들기 위한 필수 CSS 스타일 입니다. .underline { display: inline; // 블럭요소인 경우 밑줄이 제대로 그려지지 않으니 참고! font-size: [폰트사이즈]; background-image: linear-gradient([밑줄색], [밑줄색]); background-repeat:..

지금 재직 중인 회사 면접에서 Git과 Github의 차이를 설명해보라는 질문을 받은 적 있습니다. 아마 개발직군이라면 한번쯤은 들어볼만한 질문일텐데요! 그때 연습 삼아 Git을 다뤄보긴 했었는데, 겉핥기로 따라만 했어서 제대로 답하지 못했었죠ㅠ_ㅠ 지금은 Git/GitHub 없이는 개발하지 못할 정도로 매일같이 사용중입니다! 그때 못다한 대답을 이제서야 끄적여봅니다ㅎㅎ Git이란? 코드 기록을 위해 사용하는 버전 관리 시스템(VCS)입니다. Git을 사용하면 코드의 어느 부분을 어떻게 수정했는지 기록됩니다. 여러 브랜치에서 수정한 코드를 하나의 브랜치에 합칠(merge) 수도 있고, 기작업된 코드를 작업 전으로 되돌릴(reset) 수도 있습니다. ▼ Git 설치 방법 https://git-scm.co..

마지막! 4탄입니다. 정말 찐으로! 가~장 많이 사용하는 div, span 요소로 마무리해볼게요~! 7. 의미 없는 요소 , 의미를 따로 가지지 않아 언제든 사용할 수 있는 태그들입니다. 주로 요소들을 묶어 스타일을 주거나 텍스트에 스타일을 주기 위해 사용합니다. 그럼 문서 전체를 div, span 태그만으로 구성해도 될까요? 네! 가능합니다! 하지만 시맨틱 마크업에 어긋나기 때문에 W3C에서도 남발하는 것을 지양하라고 권고하고 있습니다. W3C NOTE 발췌(https://www.w3.org/TR/2011/WD-html5-author-20110809/the-div-element.html) Authors are strongly encouraged to view the div element as an el..

앞선 2탄에 이은 3탄입니다! 5. 리스트 요소 , , ol 태그는 순서가 있는 리스트를 만들 때, ul 태그는 순서가 없는 리스트를 만들 때 사용하는 태그입니다. 순서가 있는 리스트에는 랭킹이나 작동 순서, 레시피 순서 등이 해당합니다. 아래 예시 코드처럼 순서가 중요하지 않은 리스트는 ul로, 순서가 중요한 리스트는 ol로 작성합니다. 하위에는 각 아이템을 li 태그로 묶어 작성합니다. 삶은 계란 준비물 계란 냄비 물 삶은 계란 레시피 계란이 잠길 정도의 물을 끓인다 물이 끓으면 계란을 넣는다 13분 후 계란을 건져낸다 찬물에 담근 후 껍질을 깐다 ol과 ul을 사용하지 않고 리스트를 만드는 페이지도 많은 편이긴 하지만, 조금만 더 신경써서 사용해주면 웹접근성을 높일 수 있기 때문에 ul/ol 구분해..

앞선 1탄에 이은 2탄입니다! 이번에는 클릭할 수 있는 요소들 위주로 설명드리겠습니다~! 3. 링크/앵커 요소 '웹을 이해하는 마크업 개발자' 글에서도 언급했듯이 웹페이지는 하이퍼텍스트와 하이퍼링크로 이루어져있습니다. 수많은 웹페이지를 서로 연결시키는 이 하이퍼링크는 a 요소로 구현할 수 있습니다. 구글로 이동 a 태그에 필수 속성인 href 속성을 추가하여 속성값으로 URL을 넣어주면 a 요소 클릭 시 해당 URL로 이동합니다. a 요소 내에는 텍스트 외에도 이미지 등 다양한 요소들이 자식 요소로 올 수 있습니다. 자주 쓰이는 a 태그 속성은 target 입니다. target 속성을 통해 링크된 URL을 어떤 방식으로 열지 지정할 수 있습니다. target 속성을 선언하지 않으면, 기본적으로 _self..

그간 셀 수 없이 많은 페이지를 마크업하고 배포해온 실무자로서 마크업하면서 이건 꼭 알아야한다! 자주 쓰인다! 하는 태그들을 몇가지 뽑아봤습니다. (나열 순서는 큰 의미 없습니다~!) 1. 제목 요소 ~ 페이지의 제목, 섹션의 제목에 사용하는 태그들입니다. 부터 순서대로 까지 사용할 수 있는데, 숫자가 작을 수록 큰 분류의 제목입니다. 태그는 주로 웹사이트의 제목에 사용하는 편이며, 한 페이지에 딱 한번만 사용되어야합니다. 태그를 사용하지 않고 태그부터 사용하는 것도 웹 표준에 어긋나므로 부터 순서대로 사용해주셔야 합니다. 예시로 W3C 웹페이지에서 h1 요소를 찾아봤습니다. h1 요소에 W3C 로고와 대체 텍스트를 추가해서 해당 웹페이지가 W3C의 웹페이지라는 것을 나타내고 있네요. h1 요소 뿐만 아..

HTML은 처음부터 끝까지 태그로 구성되어 있습니다. 🏷 태그(tag) 태그란 해당 콘텐츠가 어떤 내용을 의미하는지 알려주는 역할을 합니다. 컴퓨터로 글 문서를 작성할 때도 제목/본문/굵게/강조 등을 구분하며 작성하듯 HTML도 다양한 목적에 맞춰 태그를 골라 사용할 수 있습니다. 하나의 태그는 기본적으로 '', '/' 세가지 기호로 구성되는데, 가장 많이 사용되는 div 태그를 예로 들면 아래와 같이 표현합니다. 내용 입력 문법은 간단합니다. 여는 태그와 닫는 태그 여는 태그와 닫는 태그 구조는 HTML의 가장 일반적인 문법입니다. 여는 태그() + 닫는 태그() 사이에 화면에 노출시킬 내용을 입력합니다. 화면에 노출시킬 내용 이때 여는 태그와 닫는 태그는 꼭 한 쌍을 이뤄야 합니다. 하나라도 빠지면 ..

이번에는 웹에 대해서 알아보겠습니다 웹 웹 표준 웹 접근성 크로스 브라우징 위 4가지 내용들에 대해 알아볼건데, 자칫 중요하지 않게 느껴질 수 있으나! 웹 개발자라면 필수로 알아야하는 내용이니 꼭꼭 잘 익혀두시길 추천드립니다! 웹(web)이란 웹이란 월드 와이드 웹(World Wide Web, www)의 줄임말로, 인터넷으로 연결된 사람들 간에 정보를 공유할 수 있는 공간을 의미합니다. 하이퍼텍스트와 하이퍼링크로 구성된 웹 페이지들을 묶어 웹사이트라고 하고, 웹사이트는 웹브라우저(Chrome, Safari, Whale, MS Edge 등)를 통해 확인할 수 있습니다. 웹 표준 ✔️웹 표준이란 웹 개발과 관련한 표준 기술, 규칙을 의미합니다. 누가 개발하든 같은 개발 과정과 결과를 지향하도록 규칙을 세워둔..