ryong8030 님의 블로그

* 전체 태그를 의미              * {color:red;}           div > strong{  div태그의 자식인 strong태그만 적용              color:greenyellow;           background:rgb(84,84,83);          }  ul태그밑의 모든 li태그 밑의 모든 strong태그 적용대상(손자태그)          ul li strong{     color:aqua; } DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>8.선택자정..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>7.레이아웃설계(2).htmltitle>    style>       #jb-container{         width:940px; /* 1000px중에서 양쪽여백을 뺀 30px씩                        ex)2000px->1970px, 3000px->2970px                      */          border:1px solid #bcbcbc;/*회색계통*/          margin:0 auto;        ..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>6.레이아웃설계(1).htmltitle>    style>       #jb-container{         width:940px; /* 1000px중에서 양쪽여백을 뺀 30px씩                        ex)2000px->1970px, 3000px->2970px                      */          border:1px solid #bcbcbc;/*회색계통*/          margin:0 auto;        ..

position:영역을 설정할때 사용하는 속성             ->width,height(크기),left,top(위치)          1.default=>static=>작성한 순서대로(=순차적으로) 화면에                            배치하는 영역설정방법          2.absolute=>기준점(브라우저의 좌측상단)                    left,top,width,height          3.relative=>상대적인 좌표방법=>실행결과가 static와 비슷                 left,top이 설정되지않은 경우          4.fixed=>고정된 위치에서 움직이지 않은속성,              위,아래 스크롤해도 고정된 위치(유지)  DOC..

CSS에서 사용하는 단위          1.절대단위=>cm,mm,pt(point)약자          2.상대단위=>px(모니터상의 점의 갯수)                  해상도 jpg>gif>png, %,em          기본단위=>px(글자를 기준)=> 1em=100%=16px DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>3.css속성단위.htmltitle>    style>        div#test{            font-size:20px;            border:5..

배경이미지를 불러오기 background           1.background-color:#FFFFFF; 색깔           2.background-url:url(경로포함해서 불러올 이미지파일명)           3.background-repeat:no-repeat(반복X)                                  repeat-x(x좌표에서만 출력)                                  repeat-y(y좌표에서만 출력)                                  fixed(이미지 고정유무)           4.background-position:이미지위치(left,top,bottom,right)DOCTYPE html>html lang="..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>2.css의 boxmodel.htmltitle>    style>        ul{           background:green;            /* margin(밖의 여백)  padding(안쪽 여백)  */           margin:10px 20px 30px 40px;/*top->right->bottom->left*/           /*            margin-top:10px;            margin-right:20..

클래스명은 여러개를 사용 O(=복수선택자)          형식) 태그명 class="클래스명 클래스명2 클래스명3"(부트스트랩)          질문->id,class를 두개 모두 스타일로 적용? yes 잘 사용X          id=>태그를 구분하는 인자(자바스크립트)      class=>스타일 적용 DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>1.css상속,복수선택자.htmltitle>    style>        .a{color:red;}        .b{background:yellow..

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>8.css의 boxmodel.htmltitle>head>body>    li+li.withborder        ul>li{테두리가 없는 경우}+li.withborder{테두리가 있는경우}    -->    ul>        li>테두리가 없는 경우li>        li class="withborder">테두리가 있는 경우li>    ul>    body>html>   실행화면

DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>7.vscode의 단축키.htmltitle>head>body>    h3>vscode에서 자주 사용되는 단축키h3>    li*16 -->    ol>        li>html문서 템플릿 작성법->html파일작성후            ! enter or html:5 enter        li>        li>태그 작성하는 방법=>태그이름 enter =>자동완성기능             ex) div enter            div>div>   ..