Yeonee's Story

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 : DOCTYPE html> 글자관련태그 h1 태그입니다. 안녕하세요 반갑습니다. 안녕히가세요 h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. 존재하지않는 태그는 일반글꼴 적용 문단 영역을 나누는 태그로는 p태그와 pre태그가 있다.(h태그 포함) 단, p태그는 줄바꿈입력을 별도의 태그로 지정해야한다. 그리고 공백은 한개의 공 백만을 표시한다. 그러면 공백을 여러개 포함시키고 싶다면? 기호문구로 작성 기 호 문 구 pre태그는 여러 공백을 인식 할 수 있다. 줄 바꿈 등을 포함하여 입력한 내용을 있는 그대로 표현하는데 특화된 태그 그 밖의 글자를 다루는 태그들 일..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 1. ! + enter or html5: + ctrl ※ html 작성할 수 있는 기본 골조를 자동완성 시켜주는 단축키입니다. ※ 중요!! 작업 시작시 맨 처음 새파일을 추가하여, 이름을 입력시 파일이름 뒤에 ' .html ' 을 입력하지 않으면 해당 단축키가 작동하지 않습니다. 2. link:css + enter 3. 한번에 ul, li 태그 생성 : na>ul>li*4 + enter 4. 한번에 ul, li, a 태그 생성 : na>ul>li*4 + enter 5. 요소 안에 클래스 이름 넣어 요소 추가하기 : .클래스이름*(추가할 갯수) .user_column*2 6. alt + shift + f 입력 라인을 ..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 제가 css 초반 공부할 때 정말 수십번도 더 챙겨본 영상이었는데요, 이제 세미 프로젝트가 들어가는 시기라 css를 활용하였던 시기에서 시간이 좀 흐르니깐 정렬부분이 다시금 조금 헷갈려서 다시 영상을 보고 공부하게되었습니다. 화면구성시에 헷갈리는 부분을 찾으며 일일이 영상을 확인해 보기에 시간이 효율적이지 않은 듯 하여 제가 공부하기 쉽게 다시 정리하는 포스팅을 작성하고자 합니다. + (해당 콘텐츠 영상 링크는 하단에 함께 노출하여두었습니다. 영상 선생님이 진짜찐짜 설명 너무 잘해주셔서 저 바로 구독자 되었었는데, 다른 분들도 이 영상보시고 css 기초 공부하시는거 강추해요!) float의 단점을 보완하여 사용하기 ..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div{ background-color: aqua; margin: 10px; padding : 10px; } #container{ width: 100%; height: 100%; background-color: pink; margin: 0 auto; padding: 0; border: 1px solid black; display: flex; /* flex-direction: column; align-items: center; */ } .justify-content-test{ justify-content: space-between; } .flex-direction-test{ flex-direction: column-..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div{ border: 1px solid blue; box-sizing: border-box; } /* 임시 스타일 부여*/ #nav{ width: 1000px; height: 40px; } #navi{ border:1px solid red; list-style-type: none; margin:0; padding:0; /* ul요소도 기본적으로 위, 아래에 margin이존재 ul요소에 padding도 존재함. */ height: 100%; } #navi>li{ border:1px solid blue; float:left; width:15%; height: 100%; text-align : center; } #na..