아라의 WWW

See the Pen 20230324 by jo0132 (@jo0132) on CodePen.

See the Pen Untitled by jo0132 (@jo0132) on CodePen.

옛날과 다르게 요즘 우리는 다양한 크기의 디바이스에서 동일한 웹사이트를 사용가능합니다. 2007년에 인터넷 사용이 가능한 모바일 기기가 세상에 나온 이후로 사람들은 모바일 웹에 열광하기 시작합니다. 모바일 기기에 최적화된 웹사이트를 제공하기위해 사람들은 노력했지만 비용과 시간 인력에 두배로 투자해야 하는 현실적인 문제를 해결했어야 했습니다. 그렇게 개발된 기술이 반응형 웹이라는 기술이 등장하였습니다. 반응형 웹은 pc, tv, 내비게이션 스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다. 왜 반응형 웹으로 만들어야 하는가? 1. 유지보수가 간편합니다. 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱버전 같은 두개의 웹사이트를 개별적으로 수정해야 하지만 하나의 페이지를 ..

웹사이트를 보다보면 아무리 사진고 동영상들이 있어도 문자가 빠진 웹사이트는 없는 것 같습니다. 문자로 정보를 전달할때 여러가지 속성으로 강조와 꾸밈을 줄 수있습니다. 이번엔 텍스트와 관련된 스타일에 대해 정리하려고 합니다. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글골이 경우는 따옴표로 감싸고 여러개 의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family:'맑은 고딕', "돋움", 궁서, Arial, Helvetica ; font size 문자의 글자 크기를 지정하는 속성입니다. 글자크기는 단위가 px가 기본입니다 하지만 상황에 따라 다른 단위를 사용하기도 합니다. px 해상도에 따라 상대적으로 달라지는 기본단..

grid는 flex와 float와 다르게 테이블을 만들듯이 사용하는 속성입니다. 세로 열과 가로 행을 기준을 요소를 정렬 할 수잇스빈다. 하지만 테이블과 달리 css그리드는 다양 한 레이아웃을 훨씬 더 쉽게 구현할 수있습니다. 자식요소를 일일이 위치를 지정해 준 것 처럼, 실제로 겹치게 층을 지면서 자리를 잡도로 ㄱ각 요소를 위치를 지정해 줄수도 잇습니다. float와 grid에 대해 궁금하시다면?? ⬇️⬇️⬇️⬇️⬇️ 레이아웃 : float에 대해 알아봅시다! 레이아웃 : float에 대해 알아봅시다! 블록구조의 태그들은 기본적으로 세로로 배치가 되지만 float를 이용하여 가로로 배치할 수있습니다. 레이아웃을 완성할때 필수적인 속성으로 지정하고 해제하는 방법도 있습니다. 1. float float는 ..

사이트의 레이아웃을 구성할 때 기본적으로 수직 구조로 이루어져있습니다. 레이아웃을 구성 할때 기본적으로 블록 구조를 사용하게 되는데 이러한 구조들은 수직으로 쌓이는 특성이기 때문입니다. 하지만 실제로 사용하기는 수평으로 사용하는 경우가 필요한 경우도 많습니다. 수평으로 만드는 속성은 많지만 가장 많이 사용되는 속성도 알맛게 사용되는 경우도 다르기 때문에 적절하고 자신이 생각하기에 편한 속성을 사용하는 것이 좋습니다. 저번에는 float에 관해 설명했다면 이번에는 flex에 관해 설명하고자 합니다. float와 grid에 대해 궁금하시다면?? ⬇️⬇️⬇️⬇️⬇️ 레이아웃 : float에 대해 알아봅시다! 레이아웃 : float에 대해 알아봅시다! 블록구조의 태그들은 기본적으로 세로로 배치가 되지만 floa..

선택자 종류 선택자에 대해서는 예전에 한번 올렸지만 다시한번 제대로 포스팅 해보려고 해요! 선택자란 css로 UI의 어느 부분을 디자인 할지, 즉 표현할 대상이 되는 부분을 말합니다. css 속성이 기본으로 형식은 이런 식으로 되어있습니다. 앞에 선택자는 태그를 선택자로 삼은 type선택자입니다. 이제 선택자에 대해 알아보겠습니다. 01. type선택자 02. 아이디 선택자 03. class 선택자 04. 전체 선택자 05. 하위 선택자 06. 자식 선택자 07. 인접 선택자 08. 형제 선택자 09. 그룹 선택자 10. 속성 선택자 11. 가상 클래스 선택자 12. 가상 요소 선택자 13. 종속 선택자 14. 선택자들의 우선순위 01. type 선택자 html의 태그 이름을 선택자로 사용한 선택자입니다..

블록구조의 태그들은 기본적으로 세로로 배치가 되지만 float를 이용하여 가로로 배치할 수있습니다. 레이아웃을 완성할때 필수적인 속성으로 지정하고 해제하는 방법도 있습니다. 1. float float는 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열 되던 블록들을 가로로 배치하려 할때 유용하며 float한 박스에 가로 사이즈를 지정해 주어야 크로스 브라우징 됩니다. (크로스 브라우징 : 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것) float 적용 전(미리보기는 0.5로 보는 것이 편합니다.) See the Pen float 적용전 by jo0132 (@jo0132) on CodePen. float 적용 후(미리보기는 0.5로 보는 것이 편합니다...

See the Pen Tail Animation by jo0132 (@jo0132) on CodePen.

css을 표현하는 방법에는 여러가지가 있습니다. 내부 스타일 시트 내부 스타일 시트는 내부 스타일 시트입니다. 외부 스타일 시트 외부 스타일 시트는 중복되는 css를 여러 파일과 공유 할 수 있도록 css를 하나의 파일화 하여 연결한 것을 말합니다. 외부 스타일 시트로 인해 중복되는 불필요한 css을 내부스타일시트로 사용하지 않아도 됩니다. .css라는 확장자를 가진 파일로 저장하고 을 이용하여 선업합니다. 외부 스타일 시트입니다. p { color: red; } @import css안으로 다른 css파일을 불러들일 경우 사용되며 외부 스타일 시트 뿐만 아니라 내부 스타일 시트로 도 불러 사용할 수 있습니다. @import 방식입니다. 인라인 스타일 html에 직접 적용하는 방식으로 style =" "형..