짧은코딩

https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com hello world Grid 반응형 웹도 지원해준다. 보통은 md를 많이 사용한다. grid system hello hello hello .container하고 tab 누르면 이렇게 완성 12개의 column으로 구성되었다는 것이 부트스트랩의 기본 개념이다. 12개의 co..

반응형 웹 1. 뷰포트(Viewport) 뷰포트는 사용자에게 보여지는 웹페이지 영역을 말한다. meta 태그에 뷰포트를 설정한다. -width=device-width: 너비를 기기의 스크린 너비로 설정한다. 즉 콘텐츠가 보여지는 영역이 뷰포트의 크기와 동일하다. -initial-scale=1.0: 페이지 로딩시 확대나 축소가 되지 않은 원래 크기를 사용하게 한다. 화면 회전방향 상관없이 기기독립적 픽셀과 css픽셀이 1:1이 되도록 한다. -minimun-scale: 줄일 수 있는 최소 크기(범위0~10) -maximum-scale: 늘릴 수 있는 최대 크기(범위 0~10) -user-scalable: yes/no, 사용자가 화면을 확대, 축소 할 수 있는지 지정 뷰포트 활용 원칙 -크기가 큰 fixed..

가상 셀렉터 가상 셀렉터에는 가상 클래스와 가상 엘리먼트가 있고 선택된 요소에 특별한 상태나 특정 부분을 선택할 수 있는 셀렉터이다. :virtual selector와 같이 사용된다. 1. 가상 클래스 가상 클래스는 선택된 요소의 특정 상태에 동작하는 셀렉터이다. 링크에 마우스가 올라가거나 체크박스에서 선택되었을 때 스타일이 적용된다. This is a link 이 코드는 마우스를 이미지에 올렸을 때 스타일이 변경된다. -많이 사용되는 가상 클래스 :active a:active 링크를 마우스로 클릭 했을때 :hover a:hover 마우스가 해당 요소의 위로 올라간 경우 :link a:link 방문하지 않은 모든 링크를 선택 :focus input:focus 태그에서 해당 요소가 마우스 포커스를 가진경우..

Position position은 박스의 배치를 위한 속성이다. 1. Static -position의 기본값이며 요소를 순서대로 배치한다. 원하는 위치에 배치할 수 없다. -순서대로 왼쪽에서 오른쪽으로 추가해 나가고 오른쪽 공간이 없으면 다음 줄로 넘겨서 배치한다. -float 속성을 이용해 좌우로 배치 가능하다. 2. Relative -static과 같이 순서대로 배치되지만 top, right, bottom, left 속성을 사용해서 원하는 위치를 지정할 수 있다. -좌표값은 원래 있던 위치(static 기준으로 원래 위치해야 하는 곳)가 기준이 되며 속성에 따라 상/하/좌/우로 원하는 자리에 배치 가능하다. 3. Absoulte -top, bottom, right, left 속성값을 이용해 요소를 원..

캐스케이딩과 우선순위 캐스케이딩 Cascading은 DOM(Document Object Model) Tree 구조에서 상위 요소에서 하위 요소로 전달되는 (상속 개념)의미에서 유래 되었다. -상위 태그에서 정의된 디자인 속성은 하위 태그로 상속 -하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있다. 우선 순위 디자인 속성이 외부 스타일시트, 내부 스타일시트, 인라인 스타일시트에 있으면 우선순위는 인라인 스타일시트가 제일 우선 순위이다. 그리고 외부, 내부 스타일시트는 문서상 정의된 순서에 따라 우선 순위가 결정된다. 만약 웹 브라우저 자체에도 css가 있다고 보면 브라우저 디자인 정의가 제일 낮은 우선 순위를 가진다. 박스 모델 박스 모델: 테두리(border), 내용(content), 안쪽..

미디어 쿼리는 반응형 웹사이트를 구현하는 기능이다. 화면이 커지거나 작아짐에 따라서 사용자의 화면에 보이는 것이 달라지게 할 수 있는 기능이다. 이렇게 보이던 페이지가 이렇게 나타날 수 있다. -코드 @media(max-width:600px){ #grid{ display: block; grid-template-columns: 200px 1fr; } ol{ border-right:none; } h1{ border-bottom: none; } } @media()라는 것을 이용하여 기능을 구현할 수 있다. max-width:600px라는 것은 가로 길이가 600px 미만일 때 아래 코드를 적용하라는 것이다. 아래 코드에서는 줄을 없어지게 하는 명령어를 통해 반응형 사이트를 구현했다.

이 사이트에서 왼쪽에 메뉴를 두고 오른쪽에 내용이 나오도록 했다. 그러기 위해서는 grid라는 기능을 이용해서 나눴다. -코드 #gird ol{ padding-left:52px; } #grid{ display: grid; grid-template-columns: 200px 1fr; } #grid #article{ padding: 25px; } 왼쪽 메뉴를 ol로 구현했고 #grid로 ID로 구현했다. -#grid ol에서는 메뉴에서 위치 조절을 해줬다. -#grid에서는 grid-template-columns는 왼쪽을 200px로 구현하고 1fr는 전체칸을 차지한다. 만약 2fr 1fr으로 했다면 전체를 3fr로 두고 왼쪽이 2fr을 차지하고 오른쪽 1fr을 차지한다. -#grid #article에서는 ..

오늘 갑자기 진로에 대한 고민을 하였다. 그러다가 프론트엔드 공부를 해보기로 마음 먹어 무작정 시작했다. 사실 2-1학기에 웹 프로그래밍 수업을 들어서 어느정도는 알고있는 상태였다. 하지만 시간이 1년 정도 지나니까 기억을 다 하지는 못했다. 그렇게 막연하게 유튜브를 보던 중 생활코딩님의 영상을 보고 따라했다. -생활코딩님 영상 https://www.youtube.com/watch?v=tZooW6PritE&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=1 그렇게 이 강의를 하루만에 다 보게되었다. 참 많은걸 배우게 되었다. 복습겸 다시 블로그에 정리하겠다. 내가 만든 사이트 https://github.com/5hyun/my-first-web-site GitHub - 5..