frontend

HTML은 우리가 흔히 생각하는 '명사', CSS는 이를 꾸며주는 '형용사', 추후에 JavaScript는 정적인 화면이 변화하게끔 하는 '동사'라고 생각하면 편하다. 좀더 구체적으로 보면, HTML은 웹페이지를 이루는 가장 기초적인 뼈대, 컨텐츠이다. 뼈대에 살을 붙

HTML 에 CSS 파일 연결하기 헤더에 `` 태그로 CSS파일을 연결한다. CSS Selector Element Class ID All Descentant(상속) Adjacent 속성 nth of type

태그를 응용해서 페이지 내부의 요소로 이동하는 내부 링크를 만들 수 있다. Contacts link 를 클릭하면 href에 명시된 id를 가진 태그 위치로 이동한다. link를 걸기 전에 태그를 추가하고 싶을 때, \`href="HTML태그만을 사용해서 사용자가 양식

CSS 란 Cascading Style Sheets 의 약자로, 우리가 작성한 html 문서에 디자인을 입혀 아름답게 꾸며 줄 수 있는 도구이다. CSS 는 프로그래밍 언어도, 마크업 언어도 아닌 Style Sheet 언어이다. HTML 문서에 있는 요소들에 선택적으로

CSS에는 텍스트를 정렬하기 위한 속성으로 text-align 이 있다. 이 속성에 대한 속성값으로는 다음과 같은 것들이 있다. text-align: justify; 문서 편집기의 '양쪽 정렬'에 해당하는 속성값이다. 모든 줄이 일정한 간격을 가질 수 있도록 정렬한다.

미디어 쿼리란 뷰포트 크기에 따라 콘텐츠를 다르게 표시할 수 있도록 CSS3에 새롭게 도입된 기술이다. 뷰포트란 사용자가 보는 화면의 크기를 말한다. 사용자가 사용하는 장치에 따라 뷰포트가 달라진다.미디어 쿼리에는 다양한 미디어 유형들이 있고, 문서가 표시되는 장치의

🚀 FreeCodeCamp Responsive Web DesignFreeCodeCamp Responsive Web Design 과정의 5개 프로젝트까지 모두 완료했다. 초반 과제들은 예시 과제를 최대한 비슷하게 클론코딩하는 것을 목표로 했고, 자신감이 더 붙으면 직

레이아웃은 디자인을 위해 중요한 요소 중 하나이지만, 아직까지 레이아웃을 코드로 잘 표현하는 최적의 방법을 찾아내지는 못했다. 레이아웃의 흑역사와 flex 의 등장 배경을 알아보자! 가장 먼저 Table 로 표현하려는 시도가 있었다. 표는 격자모양으로 생겼다는 점에 착

JS에서 css를 조정하는 방법랜덤하게 가져온 bgImageUrl 을 body의 스타일 속성으로 넣어준다. 배경화면으로 지정한 뒤 한 이미지로 화면 전체를 채우기 위해 다음과 같이 css 코드를 작성한다. 간단히 body 에 overflow: hidden 속성으로 해결