개발나라 스용공주

이번 글은 아래 실습 글을 이어서 웹페이지 실습을 완성하는 글이다.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 하나하나를 박스로 생각하여 그것의 부피감을 결정

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.(생활코딩)https://youtube.com/watch?v=MLjCVUspcDo&t=516s  [ F12로 검사하기 ]F12를 누르면 아래 사진과 같이 검사를 하는 부분이 뜨게 되는데 여기에서 Style 부분을 보게 되면 해당 태그가 어떤 css로 구성되어져 있는지 나타나있다. 그리고 그 밑을 보면 margin, border, padding, contents가 각 몇 픽셀로 구성되어져 있는지 나오게 된다.마우스 커서를 올리게 되면 해당 영역을 보여준다.

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=MLjCVUspcDo&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=8  [ 박스 모델 ]박스 모델을 사용하여 해당 문자가 얼마만큼의 공간을 차지하고 있는지 확인할 수 있다.border-width : 선 두께border-color : 선 색상border-style : 선 모양아래 코드와 결과를 보면 태그는 화면 전체를 차지한다는 것을 확인할 수 있다.* 이렇게 화면 전체를 차지하는 것을 block level element이라고 부른다. Youtuber Youtube Contents   반면 아래 코드와 같이..

이번 글은 아래 강의를 바탕으로 작성되었습니다.(생활코딩)https://www.youtube.com/watch?v=8-rCMmamtDE&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=7  [ css 그룹화하기 ]아래 사진과 같이 두개의 부분에 빨간글씨를 적용하고 싶다면 아래 코드와 같이 하나하나 적용해줄 수도 있다.하지만 그렇게되면 같은 내용을 중복하여 작성해주고 있으므로 비효율적이다. Youtube Contents    그렇다면 아래 코드와 같이 클래스로 묶어서 안에 css를 작성하여 한번에 적용시킬 수 있다. Youtuber Youtube Contents Introducing ..