html(css)코드해석좀 이해시켜주세요

본문 바로가기

html(css)코드해석좀 이해시켜주세요

작성일 2018.12.21댓글 1건
    게시물 수정 , 삭제는 로그인 필요

안녕하세요 웹 관련해서 공부하고있는 학생입니다. 다름이 아니라 간단한 웹을 만들려고하다가 인터넷에 있는거를 가져왔는데 잘 모르겠어서요... 이 코드의 역할 같은거를  정확히 이해를 하고 싶어요...!!


//css 입니다..(아는 것도 있는데 헷갈려서 부탁드립니다 ㅠ)

body{
 font-family: "글자";
 background:url(그림.png) no-repeat left top fixed;
 background-size:cover;
}
wrapper{
 margin:30px auto;
 width:750px;
}
section {
 display:green;
 margin:15px auto 0;
}
nav {
 width:100%;
 height:40px;
 background-color:#222;
}
nav ul {
 list-style:none;
}
nav ul li {
 display:inline;
 float:left;
 margin:10px;
}

nav a {
 padding:6px 40px 9px;
 color:white;
 text-decoration:none;
 text-shadow:0 1px 1px green;
}
nav a:hover {
 background-color:#ffd800;
 color:green;
 text-shadow:none;
 border-top-left-radius:10px;
 border-top-right-radius:10px;
}
nav a.current {
 background-color:white;
 color: green;
 text-shadow:none;
 border-top-left:radius:5px;
 border-top-right:radius:5px;
}

h2 {
 margin-left:10px;
 background:url(icnn.png) no-repeat left top;
 background-size:contain;
 padding-left:50px;
 padding-top:1px;
 padding-bottom:10px;
}
article {
 padding:5px 20px;
 border-left:2px solid #222;
 border-right:2px solid #222;
 background-color:rgba(255, 255, 255, 0.9);
}
footer {
 margin: 0px auto;
 padding: 10px;
 font-size:12px;
 background-color:#111;
 color:white;
 border:4px solid #222;
}
header {
 margin: 0px auto;
 padding: 5px;
 color:green;
}


// 코인슬라이더 이용한 아래 코드입니다  주석으로 어떻게 활성화가 되는지 이해가도록 설명좀해주세요 ㅠㅠ

<!DOCTYPE html>

<html>
< head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="coin-slider-styles.css" type="text/css">
    <script src="jquery-1.9.1.js"></script>
    <script src="coin-slider.js"></script>
    <script>
    $(document).ready(function(){
        $("#coin-slider").coinslider();
        });
    </script>
    <style>
        table {
            margin:10px auto 30px;
            width:720px;
            border:1px solid black;
            border-collapse:collapse;
        }
        th, td {
            padding:15px;
            border:1px solid black;
        }
        th {
            background-color:#ddd;
        }
    caption {
        margin: 15px;
        font-size: 18px;
    }   
    #coin-slider{
        margin: 0 auto;
    }
    #notice{
        width:565px;
        margin:10px auto;
    }
    </style>



profile_image 익명 작성일 -


//css 입니다..(아는 것도 있는데 헷갈려서 부탁드립니다 ㅠ)
margin padding width, height 등의 기본은 아신다는 전제하에 주석을 답니다. 

body{
 font-family: "글자"; //폰트종류가 들어갑니다. sans-serif 라는 폰트를 쓸거면 sans-serif를 쓰면 됩니다.
 background:url(그림.png) no-repeat left top fixed; // 배경에 이미지를 넣고, 반복을 하지않고(no-repeat) 배경이미지의 위치는 왼쪽/오른쪽부터. 위치는 고정입니다)
 background-size:cover; // body 사이즈에 꽉 맞게 배경을 처리합니다. 바디보다 작아도 사이즈를 바디사이즈에 맞게 만들어요
}
wrapper{
 margin:30px auto; // auto는 가운데 정렬을 위해 씁니다.
 width:750px;
}
section {
 display:green; // 잘못된것 같은데요 display속성에 green은 없습니다. 
 margin:15px auto 0;
}
nav {
 width:100%;
 height:40px;
 background-color:#222;
}
nav ul {
 list-style:none; // ul 을사용하면 앞에 리스트마다 앞에 원모양의 특수문자가 붙는데 이걸 없애줍니다.
}
nav ul li {
 display:inline; // inline과 block 속성은 아시죠...?ㅠㅠ
 float:left;// 왼쪽
 margin:10px;
}

nav a {
 padding:6px 40px 9px;
 color:white;
 text-decoration:none; //a 태그에 기본으로 들어가는 밑줄을 없애줍니다.
 text-shadow:0 1px 1px green;
}
nav a:hover {
 background-color:#ffd800;
 color:green;
 text-shadow:none;
 border-top-left-radius:10px;
 border-top-right-radius:10px;
}
nav a.current {
 background-color:white;
 color: green;
 text-shadow:none; //그림자
 border-top-left:radius:5px; // 왼쪽위의 테두리를 둥글게
 border-top-right:radius:5px; // 오른쪽위의 테두리를 둥글게
}

h2 {
 margin-left:10px;
 background:url(icnn.png) no-repeat left top;
 background-size:contain;
 padding-left:50px;
 padding-top:1px;
 padding-bottom:10px;
}
article {
 padding:5px 20px;
 border-left:2px solid #222;
 border-right:2px solid #222;
 background-color:rgba(255, 255, 255, 0.9); // 뒤의 0.9 는 투명도
}
footer {
 margin: 0px auto;
 padding: 10px;
 font-size:12px;
 background-color:#111;
 color:white;
 border:4px solid #222;
}
header {
 margin: 0px auto;
 padding: 5px;
 color:green;
}



// 코인슬라이더 이용한 아래 코드입니다  주석으로 어떻게 활성화가 되는지 이해가도록 설명좀해주세요 ㅠㅠ

<!DOCTYPE html>

<html>
< head>
    <meta charset="utf-8"> <!-- 언어설정 -->
    <link href="style.css" rel="stylesheet" type="text/css"> <!-- css 파일 불러오기 -->
    <link rel="stylesheet" href="coin-slider-styles.css" type="text/css"> <!-- css 파일 불러오기 2 이건 슬라이드 css같네요 -->
    <script src="jquery-1.9.1.js"></script> <!-- jQuery 불러오기-->
    <script src="coin-slider.js"></script> <!-- 슬라이드 js 불러오기-->
    <script>
    $(document).ready(function(){
        $("#coin-slider").coinslider(); 
/*coin-slider 를 적용합니다. id가 coin-slider 인 element에 적용됩니다.
근데 지금 여기에 들어있는 html문서에는 엘리먼트가 없네요
상세한 옵션들은 코인슬라이더 스크립트페이지에 자세히 설명되어있을거에요*/
        });
    </script>
    <style> 
        table {
            margin:10px auto 30px;
            width:720px;
            border:1px solid black;
            border-collapse:collapse; //테이블 테두리를 단선으로 처리합니다.
        }
        th, td {
            padding:15px;
            border:1px solid black;
        }
        th {
            background-color:#ddd;
        }
    caption {
        margin: 15px;
        font-size: 18px;
    }   
    #coin-slider{
        margin: 0 auto; 
    }
    #notice{
        width:565px;
        margin:10px auto;
    }
    </style>

연관된 질문 답변 리스트

html5 css 풀이 해석

... >부모에서 글자 중앙정렬*/ } 제가 이렇게 메모해놨었는데 이해가 안가서요.. 위에 메모랑 css보시고 풀이 좀 해주세요..ㅜㅜ 특히 늘어나는 콘텐츠에...

안녕하세요 html.css,javascript...

... 되는지 이해가도록 설명좀해주세요 ㅠㅠ < head... 이해는 되지만, 이걸 어떻게 답변을 드려야 하나 좀 난해하네요... -.-:; 먼저 HTML 과 CSS 그리고...

HTML,CSS,JS,JSP 몇 가지 질문드립니다

... 문서(HTML 등)을 반환합니다. 5. 브라우저의 수신 및 재요청 : 브라우저가 받은 문서를 해석하고, 추가적으로 필요한 부분(CSS, 자바스크립트 및 이미지 등)을...

Html,css코딩 공부하는 팁좀...

... 입학해서 html,css,javascript등을 배우고 있습니다. 공부는 늘 새로운걸... 혹시 코드들을 이해하는데 팁이 있다면 뭐라도 좋으니 조언 부탁드립니다 진짜...

html,css,js 질문

... 뜨게하는 코드좀 알려주세요 .그런데 canvas 가... 상태라고 이해하겠습니다. 이 경우, 각 버튼에... ```html 버튼 1 버튼 2 ``` 2. JavaScript 함수를...

html / css position:relative와...

... 주세요 ㅠ (html 소스) DIVISION1 DIVISION2 가있고, css소... 코드로 원하는 효과를 제대로 낼 수 있는 방법을 찾을 수 있습니다. 중요한 건 개념을 충분히 이해...

티스토리 css 편집 질문

... 보이게 css 편집하는 법 좀 알려주세요 코드... 편집' > 'HTML 편집'을 찾으세요. 그리고 거기서 'CSS'라는... https://notice.tistory.com/2656 이해가 안 되시거나, 더 궁금한 점이...