2024/03/04 안녕하세요 lika-7 입니다 이번시간에는 반응형 웹을 다루겠습니다. 해상도와 뷰포트 이해하기 레이아웃을 반응형으로 설계하려면 기기의 해상도를 이해해야 합니다. 모바일과 태블릿 등 작은 디스플레이에는 일반 모니터의 픽셀 기준을 적용할수 없습니다. 이를 위해 도입된 것이 뷰포트 입니다. 뷰포트를 통해 기기의 해상도 기준으로 렌더링을 할수 있습니다. 미디어 쿼리 반응형 웹을 구현하기 화면의 크기에 맞춰 레이아웃을 다시 구성해야 합니다. 이를 위해 미디어 쿼리를 사용합니다 미디어 쿼리 작성 방법 요소 사용 @media 사용 @media 미디어_타입 and (조건식) {스타일_선언} @media screen and (max-width: 640px){ /* 640px 이하부터 적용할 스타일 선..

2024/03/04 안녕하세요 lika-7 입니다. 이번시간에는 flex 속성을 다루겠습니다. 플렉스 박스란 flex 속성을 사용한 레이아웃 모델을 플렉스 레이아웃이라고 합니다 이를 이용하여 요소들을 X축, Y축 기준으로 유연하게 배치할수 있습니다. box1 box2 box3 유연하게 배치할 요소의 부모 요소의 displau 속성값을 flex로 지정합니다. 이것을 flex conteiner하고 하고, 자식요소를 flex item이라고 합니다. box1 box2 box3 flex container 값은 flex와 inline-flex가 있습니다. flex는 block과 inline-flex는 inline-block 속성에 대응합니다. flex-direction flex-direction 속성을 이용해 가로..

2024/03/04 안녕하세요 lika-7 입니다. 이번시간에는 float 속성을 알아보겠습니다. float 속성 이해하기 css 의 float 속성은 어떤 요소를 웹 페이지의 기본 흐름에서 벗어나 그 다음 요소 위에 떠 있게 합니다. HTML요소는 화면에 렌더링 될 때 마크업 순서대로 위에서부터 아래로 나열되지만 float 속성을 사용하면 이러한 흐름과 상관 없이 요소를 배치할 수 있습니다. CSS의 float 속성은 주로 레이아웃을 조정하기 위해 사용됩니다. 요소를 왼쪽 또는 오른쪽으로 이동시키며 다른 내용이 주변에 흐르도록 할 수 있습니다. 주로 텍스트 주변에 이미지를 둘 때 사용되지만, 그 외에도 다양한 레이아웃 디자인에 활용될 수 있습니다. 이 텍스트는 이미지의 주변으로 흐르게 됩니다. Floa..

2024/03/03 안녕하세요 lika-7 입니다. 이번시간에는 가상 요소를 알아보겠습니다. 가상요소란 가상 요소는 특정 요소에 추가하여 스타일을 적용할 때 사용합니다 가상 요소는 존재하지 않는 요소를 존재하는 것처럼 해줌으로 문서의 특정 부분을 선택 할 수 있습니다 실무에서는 ::before, ::atfer를 가장 많이 사용합니다. 위의 예제는 content 속성에 attr() 함수를 사용하여 data-username값(사용자 이름)을 가져왔습니다. 이처럼 가상 요소를 이용해 동적 콘텐츠를 만들수 있습니다.

2024/03/03 안녕하세요 lika-7 입니다. 이번시간에는 실무에서 자주 쓰는 CSS 패턴을 정리하겠습니다. display 속성 display 속성은 HTML 요소인 인라인과 블록 요소로 나뉩니다. 인라인 줄바꿈이 되지 않고 크기가 내용만큼 적용 됩니다 ,, 등 블록요소 width를 부모에게 상송받은 width의 100%를 사용 width와 상관없이 무조건 줄 바꿈이 됩니다. 부모가 없는 블록 요소는 웹 브라우저 너비만큼 width가 지정 됩니다 , 등 display 속성을 지정하여 요소를 화면에 표시하는 방법을 결정할수 있습니다. 속성값 의미 none 화면에서 사라집니다 block 부모 요소의 너비만큼 차지하며 줄 바꿈이 됩니다 inline 콘텐츠만큼 너비를 차지하며 줄바꿈 되지 않습니다. 위아래..

2024/03/03 안녕하세요 lika-7 입니다. 이번시간에는 가상 요소를 알아보겠습니다. 박스모델이란 박스모델이란 페이지의 모든 요소는 사각형 박스라고 할수 있습니다. 표준 CSS 박스 모델 CSS 박스 모델은 콘텐츠Contents, 안쪽 여백Padding, 테두리Border, 바깥쪽 여백Margin 모두 4개의 영역으로 구성됩니다 콘텐츠 영역 모든 여백을 제외한 실제 내용이 표시되는 영역입니다. 안쪽 여백 영역 Padding 안쪽 여백 영역은 콘텐츠 크기에 영항을 주며 콘텐츠와 테두리가 겹치지 않도록 공간을 확보합니다 padding: ; 테두리 영역 Border 안쪽 여백과 바깥쪽 여백 사이의 영역 입니다. border: ; 바깥쪽 여백 영역 Margin 이 간격을 조절하여 페이지의 여백을 배치하는..

2024/03/03 안녕하세요 lika-7 입니다. 이번시간에는 css 기초문법을 복습하도록 하겠습니다 CSS 작성법 CSS는 하나 이상의 선택자에 여닫는 중괄호롤 블록을 구성하여 작성하며, 각 블록에는 다양한 스타일 속성을 나열 합니다 선택자 {속성명: 속성값;속성명: 속성값;} CSS 우선순위 우선순위 타입 설명 1 중요성 속성값 뒤에 !important를 붙인 속성, 모든 스타일보다 우선함 2 인라인 HTML 요소의 sytle 속성을 직접 지정한 스타일 3 미디어 타입 특정 CSS가 정의되어 있지 않다면 속성 정의는 모든 미디어 타입에 적용 4 사용자 정의 사용자 정의 CSS가 HTML 문서에 있는 CSS보다 우선함 5 선택자 특정성 특정 컨텍스트 선택자(#heading o)는 일반 정의보다 우선함..

2024/03/02 안녕하세요 lika-7입니다. 이번 시간에는 실무에서 많이 쓰는 HTML요소를 정리하겠습니다. 레이아웃을 위한 요소 웹 페이지의 레이아웃은 정보를 잘 정리하여 일관된 모습으로 배치하는 것을 말합니다. 시맨틱 웹을 통한 구현으로 웹페이지를 구성하여 의도한 대로 사용자에게 정확한 정보를 전달합니다. 시맨틱 웹을 만드는 레이아웃 요소는 ,,,등이 있습니다.. 웹 페이지의 가장 상단에 위치하며 사이트 이름, 문서의 제목, 로고, 검색 폼 등의 소개나 탐색 요소를 나타낼 때 사용합니다. 내비게이션의 약자로, 다른 페이지로 이동하는 링크를 보여주는 메뉴, 목차, 색인 등을 만들 때 사용합니다. 각 항목은 안에 를 넣어 목록 형태로 만듭니다. 문서의 주요 컨텐츠를 정의하는데 사용합니다. 웹 검색 ..