개발나라 스용공주

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=djBrHjeitUo&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=14  [ CSS 묶어 관리하기 ]중복되는 css가 있다면 이것을 묶어 관리하면 나중에 수정하기도 편리해진다.아래 두개의 페이지 코드가 있다.이 두 페이지 코드는 모두 동일한 형식으로 내부의 콘텐츠 구성만 다르게 이뤄져 있다. Youtuber Youtube Contents Introducing My Youtube This is my YOUTUBE CHANNEL..

이번 글은 아래 강의 내용을 바탕으로 작성하였다.(생활코딩)https://www.youtube.com/watch?v=qe3nSIg2k3Y&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=13  [ 반응형 웹페이지 실습 ]아래 사진과 같이 모니터 화면 크기에 맞게 만들어둔 웹페이지를 핸드폰 크기와 같이 세로가 더 긴 형태에서 적합하게 보여지도록 페이지 디자인을 반응형 웹으로 수정할 것이다.[ 기존 코드 ]   [ 전체 코드 ] Youtuber Youtube Contents Introducing My Youtube This is my ..

이번 글은 아래 영상 내용을 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=aA4xunvDWU8&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=12  [ 반응형 웹 / 반응형 디자인 ]* 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것* 미디어 쿼리를 사용하여 일정 화면 크기에서 웹페이지 요소에 디자인을 다르게 적용해줄 수 있다.   [ @media로 반응형 디자인 적용하기 ] HwangSeoYoung  @media를 통해 화면 크기의 가로가 500이 넘어가면 글씨 크기와 border 두께를 두껍게 해주는 코드를 만들어볼 것..

이번 글은 아래 실습 글을 이어서 웹페이지 실습을 완성하는 글이다.https://hwangseoyoung.tistory.com/123 [생활코딩] CSS 왕기초 15장 - Visual Studio Code / 예제 실습 (1)아래 사진과 같은 형태의 웹페이지를 만들어 볼 것이다.제목과 목차는 고정인 상태이고 목차를 선택하면 그 목차에 해당하는 본문 내용이 뜨는 것이다.그리고 제목 밑과 목차와 본문 내용 사이hwangseoyoung.tistory.com   Youtuber Youtube Contents Introducing My Youtube This is my YO..

https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 위 사이트는 현재 웹 브라우저들이 검색한 기술에 대해 html, css, JavaScript에서 얼마나 채택하고 있는지 통계를 알려준다.해당 기술에 대해서 웹 브라우저의 버전이 사용이 가능하다면 초록색으로 뜨게 된다.

이번 글은 아래 글을 이어 그리드를 사용하여 실습 예제 만들기를 진행할 것이다.https://hwangseoyoung.tistory.com/123 [생활코딩] CSS 왕기초 15장 - Visual Studio Code / 예제 실습 (1)아래 사진과 같은 형태의 웹페이지를 만들어 볼 것이다.제목과 목차는 고정인 상태이고 목차를 선택하면 그 목차에 해당하는 본문 내용이 뜨는 것이다.그리고 제목 밑과 목차와 본문 내용 사이hwangseoyoung.tistory.com  [ 아무 의미를 담지 않는 태그 ] 태그와 태그는 제목 태그 등과 같이 의미를 담고 있는 태그는 아니지면 block과 inline으로 나뉜다.아래 사진과 같이 태그로 감싸면 block element가 되어 위 아래로 나열된다. App..

아래 사진과 같은 형태의 웹페이지를 만들어 볼 것이다.제목과 목차는 고정인 상태이고 목차를 선택하면 그 목차에 해당하는 본문 내용이 뜨는 것이다.그리고 제목 밑과 목차와 본문 내용 사이 두 곳에는 실선을 그어 공간을 구분시켜줄 것이다.   [ 제목 밑에 실선 긋기 ] Youtuber 아래 사진은 위의 코드와 다르게 margin : 0;과 padding : 15px;을 안해주었을 때이다.콘텐츠인 Youtuber 글씨 밑에 바로 실선이 생기고 그 콘텐츠를 둘러싼 border 부분의 상하로 margin 값이 있는 것을 아래 사진의 주황색 부분으로 확인할 수 있다.따라서 margin을 0으로 한 뒤 콘텐츠와 border 사이에 간격을 위해 padding 값을 넣어준다.  그럼 이제 아래 사진과 같이 pad..

[ 박스 모델 이론 요약 ]html의 태그들은 태그들의 기본 성격에 따라 block처럼 화면 전체를 쓰기도 하고 inline처럼 콘텐츠의 크기만큼만 쓰기도 한다.콘텐츠의 크기를 지정할 때 : width 또는 height를 사용한다.Padding : 콘텐츠와 바깥 테두리 사이의 공간Margin : 테두리와 테두리 사이의 공간 (남는 공간 = 마진)=> html 하나하나를 박스로 생각하여 그것의 부피감을 결정