--------------------------------index.html

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>기본 선택자와 하위 선택자, 자식 선택자</title>

<link rel="stylesheet" href="./css/custom.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

    //문서를 모두 해석했으면 { }내부에 있는 명령문을 실행한다.

    $(document).ready(function( ) { 

        $('#mainmenu > li').mouseover(function( ) {

            $(this).find('.submenu').stop( ).slideDown( );

        });

        $('#mainmenu > li').mouseout(function( ) {

            $(this).find('.submenu').stop( ).slideUp( );

        });

    });

</script>

</head>

 

<body>

    <header>

        <img src="./imgs/logo.png" alt="로고">

        <nav>

            <ul id="mainmenu">

                <li>

                    <a href="#">about us</a>

                    <ul class="submenu">

                        <li><a href="#">about us</a></li>

                        <li><a href="#">history</a></li>

                        <li><a href="#">location</a></li>

                    </ul>

                </li>

                <li>

                    <a href="#">new products</a>

                    <ul class="submenu">

                        <li><a href="#">software</a></li>

                        <li><a href="#">hardware</a></li>

                        <li><a href="#">service</a></li>

                        <li><a href="#">products</a></li>

                    </ul>

                </li>

                <li>

                    <a href="#">solution</a>

                </li>

                <li>

                    <a href="#">community</a>

                    <ul class="submenu">

                        <li><a href="#">free board</a></li>

                        <li><a href="#">QnA</a></li>

                    </ul>

                </li>

            </ul>

        </nav>

        <ul class="topmenu">

            <li>

                <a href="#">로그인</a>

            </li>

            <li>

                <a href="#">회원가입</a>

            </li>            

        </ul>

    </header>

    <div class="clear"></div>

    

    <div class="bn"> <h2>distribution <span class="orange">solution</span></h2></div>

    

    <section>

        <img src="imgs/photo1.jpg" alt="전산실" class="left">

        <div class="right">

            <h3>전산실 <span class="sky">배포 솔루션</span> 시스템</h3>

            <p>전산실에서 모든 부서의 소프트웨어를 관리하고 통합하는 소프트웨어 솔루션 시스템 제우스는 빠른 소프트웨어 배포 속도로 관리의 편의성을 높였다.</p>

            <a href="#">자세히보기</a>

        </div>

    </section> 

    <div class="clear"></div>

    <section>

        <img src="imgs/photo1.jpg" alt="전산실" class="right">

        <div class="left">

            <h3>전산실 <span class="sky">배포 솔루션</span> 시스템</h3>

            <p>전산실에서 모든 부서의 소프트웨어를 관리하고 통합하는 소프트웨어 솔루션 시스템 제우스는 빠른 소프트웨어 배포 속도로 관리의 편의성을 높였다.</p>

            <a href="#">자세히보기</a>

        </div>

    </section>

    <div class="clear"></div>

    

    <footer>

        <img src="./imgs/ft-logo.png" alt="푸터로고" class="left">

        <div class="left">

            <p>광주광역시 북구 경양로170 (중흥동) 한경빌딩(구 남양건설빌딩) 5층 | 한국경영원 인재개발원 | 대표이사 김보현 | 사업자등록번호 409-81-33798 | 대표전화 : 062-720-4800 </p>

            <p>copyright &copy; 2018 한국경영원 인재개발원 All rights reserved.</p>

        </div>

    </footer>

</body>

</html>




-------------------------------------------custom.css

 

@charset "utf-8";

/*CSS Document*/

 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap');

 

* { margin:0; padding:0; box-sizing:border-box; }

ul li { list-style:none; } /*블릿 제거*/

a { display:block; color:#fff; text-decoration:none; } /*텍스트 언더바 제거*/

.left { float:left; }

.right { float:right; }

.clear { clear:both; }

 

/*글꼴(서체): 구글 웹 폰트(fonts.google.com), 텍스트 크기, 배경색*/

body { 

    font-family:'Noto Sans KR', sans-serif; font-size:15px; 

    background:#fff; }

 

/* header 요소의 자식인 img요소와 nav요소, ul, topmenu 요소를 먼저 배치해야한다.*/

header { position:fixed; width:100%; height:70px; background:rgba(0, 0, 0, 0.4); } 

header img { float:left; height:40px; margin:15px 0 0 50px; }



header nav { float:left; margin:25px 0 0 100px; } /*메뉴를 왼쪽에 배치하고 여백으로 위치를 잡는다. top right bottom left*/

header nav > ul > li { float:left; position:relative; } 

/*메인메뉴를 좌에서 우로 배치*/ 

header nav > ul > li >a { padding:5px 20px; 

text-transform:capitalize;}

/*메인메뉴의 여백을 지정(위 아래 좌우), 영문자의 첫 글자를 대문자로 변경*/ 

header nav > ul > li > a:hover {background:rgba(255, 255, 255,0.4);}

 

header .submenu { 

    display:none; position:absolute; left:0; top:45px; z-index:9; width:100%; 

 } 

header .submenu li a { padding:10px 0; text-align:center; background:rgba(255, 255, 255, 0.4); }

header .submenu li a:hover { color:rgb(44, 72, 165); background:rgba(255,204,0,0.8); }



header .topmenu { float:right; margin-right:50px } /*)톱 메뉴를 오른쪽에 배치*/

header .topmenu li { float:left; }

header .topmenu li a { padding:10px; font-size:13px; }

header .topmenu li a:hover {color:rgb(154, 181, 255);}



.bn { height:500px; 

background:url(../imgs/bn-aboutus.jpg) no-repeat center; 

background-size:cover;/*배경 이미지를 박스 사이즈에 맞춘다.*/}

.bn h2 {padding-top:300px;

    font-size:72px; color:rgba(255,255,255,0.4); font-weight:700; text-align:center; text-transform:uppercase;}

.bn h2 .orange { color:rgba(255,204,0,0.55) }

 

section { width:1300px; margin:100px auto; } 

section img { width:600px; }

section div { width:600px; height:300px; margin:50px 0;}

section div h3 { font-size:34px; color:rgb(52, 68, 211); font-weight:100; }

section div h3 .sky { color:#09f; font-weight:400; }

section div p { padding-top:30px; }

section div a {

    width:120px; height:40px; margin-top:130px;

    color:#36f; text-align:center; line-height:36px;

    border:1px solid #36f; border-radius:20px;

}

section div a:hover { color:#fff; background:#36f; }

 

footer { height:200px; margin-top:150px; background:rgb(31, 31, 40);}

footer img { height:40px; margin:50px 80px 0 50px; }

footer div { width:610px; margin-top:45px;}

footer div p { font-size:13px; color:#fff }

'Coding' 카테고리의 다른 글

CSS 선수학습(5)  (0) 2021.07.14
CSS 선수학습(4)  (0) 2021.07.14
CSS 선수학습(2)  (0) 2021.07.12
html 선수학습(7)  (0) 2021.07.09
html 선수학습(6)  (0) 2021.07.08

<!-- 

    스타일 시트는 HTML 요소를 선택하여 요소의 배치(Layout)와 스타일을 변경할 때 사용한다.

    HTML 요소를 선택할 때 선택자(selector)를 사용한다.

 

    스타일 시트 적용 방법은 작성 위치에 따라 인라인 방식 적용, 내부 방식 적용, 외부 방식 적용으로 구분한다.

    인라인 방식은 style 속성의 값으로 스타일 속성과 스타일 값을 적용하고 내부 스타일 시트는 <style> 태그 내부에 스타일 속성과 스타일 값으로 스타일을 적용하고 외부 스타일 시트는 별도의 *.css 파일을 외부에 저장한 후 이 파일을 웹 문서(*.html)에 포함시켜서 스타일 시트를 적용한다.

    

    기본문법:

    선택자와 CSS블록({ })으로 구성되며, CSS 블록 내부에는 스타일 속성과 스타일 값으로 구성된다.

    선택자는 요소를 선택할 때 사용한다. CSS블록의 스타일 속성과 스타일 값은 콜론(:)으로 구분하며, 스타일 값 뒤에는 세미콜론(;)을 붙인다.

 

    적용 우선 순위: 인라인 스타일시트> 내부 스타일시트> 외부 스타일시트

    스타일 시트 적용 우선 순위: 아래에 작성하는 것이 우선 순위가 높다.

    스타일 시트의 상속성 : 위에서 작성한 스타일 시트는 아래쪽에 영향을 미친다.

-->

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>스타일시트 기본 문법</title>

<link rel="stylesheet" href="./css/style.css">

 

<style>

    .box { width: 300px; height: 200px; background: #fc0; }

</style>

</head>

<body>

    <div style="width: 300px; height: 200px; background: blue;"></div>

    <div class="box"></div>

    <div class="out"></div>

</body>

 

</html>

 

------------------------ style.css 파일

@charset "utf-8";

/*CSS Document*/

 

@import url(./css/reset.css);

 

.out { width: 300px; height: 200px; background: #0f0; }

 

 

-----------------------

 

<!--

기본 선택자: 스타일 시트를 적용할 때 기본 선택자만 사용하려고 노력해야한다.

    1.전체 선택자: 웹 문서의 모든 요소를 선택하는 선택자

    2.태그 선택자: 요소명으로 요소를 선택하는 선택자(시멘틱 태그, h태그)

    3.클래스 선택자: 클래스명으로 요소를 선택하는 선택자(div, span, p 등)>대부분의 요소에 사용

    4.아이디 선택자: 아이디명으로 요소를 선택하는 선택자 >자바스크립트와 제이쿼리에 관련된 박스에 사용한다.

-->

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>기본선택자</title>

<style>

    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* box-sizing:border-box; 는 박스의 패딩값과 보더값을 박스의 크기 값에 포함시킨다.*/

    .pbox { width:500px; height:250px; background:#999; }

    .cbox { width:500px; height:100px; padding:50px; background:#fc0; }

    h2 { color:#36f; }  /*태그선택자*/

    p { color:palegoldenrod; }

    .blue { color:#00f; } /*클래스선택자(.)*/

    #javascript { color: palevioletred; } /*아이디 선택자(#)*/

</style>

</head>

 

<body>

    <h2>태그선택자로 선택하여 스타일을 적용한다.</h2>

    <p>클래스 선택자로 선택하여 스타일을 적용한다.</p>

    <p class="blue">클래스 선택자로 선택하여 스타일을 적용한다.</p>

    <p id="javascript">아이디 선택자는 제이커리에서 주로 사용한다.</p>

    <div class="pbox">

        <div class="cbox"></div>

    </div>

</body>

</html>

 

 

-----------------------------------------------

 

<!--

HTML 태그는 계층 구조를 이루고 있다. 부모, 형제, 자식, 후손 태그가 있다.

부모 태그는 태그를 감싸는 태그이다. <header>

형제 태그는 같은 계층에 해당되는 태그이다. <h1>, <ul>

자식 태그는 부모 태그 바로 아래 계층에 해당하는 태그이다. <h1>, <ul>

후손 태그는 부모 태그가 감싸고 있는 모든 태그이다. <h1>, <ul>, <li>, <a>

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>후손(하위)+자식 선택자</title>

<style>

    * { margin: 0; padding: 0; box-sizing: border-box; }

    /*자식 선택자(>)는 자식 태그만 선택할 때 사용한다.*/

    /*후손(하위) 선택자(스페이스)는 후손 태그를 모두 선택할 때 사용한다.*/

    header > ul { margin-left: 50px; } /*자식 선택자 */

    header ul { margin-left: 50px; } /*후손 선택자*/

    ul li { list-style: none; } /*후손 선택자로 블릿제거*/

    /* ul li ul {display: none; } */ /*후손 선택자로 박스 제거*/

    header > ul > li { float: left; } /* 자식 선택자로 메인메뉴만 선택하여 박스를 왼쪽에서 오른쪽으로 배치*/

    ul li { background: #fc0; } /*후손 선택자로 메뉴의 배경을 변경.*/

</style>

</head>

<body>

    <header>

        <h1>LOGO</h1>

        <ul>

            <li><a href="#">menu01</a>

            <ul>

                <li><a href="#">submenu01</a></li>

                <li><a href="#">submenu01</a></li>

            </ul>

            </li>

            <li><a href="#">menu02</a></li>

        </ul>

    </header>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(4)  (0) 2021.07.14
CSS 선수학습(3)  (0) 2021.07.13
html 선수학습(7)  (0) 2021.07.09
html 선수학습(6)  (0) 2021.07.08
html 선수학습(5)  (0) 2021.07.07

<!--

입력 양식(input 요소)은 사용자(Client, Web Browser)에게 정보를 입력받는 공간을 말하며 입력 양식 태그(input 태그)를 사용해 만든다.

 

일반적으로 정적 페이지의 경우에는 웹 서버에서 사용자로 데이터가 전달된다. 하지만 회원가입과 로그인, 검색과 관련된 경우에는 사용자가 서버로 데이터를 보내야 한다. 

 

사용자가 웹 서버로 데이터를 보낼 때 사용하는 가장 기본적인 방법은 입력 양식을 사용하여 사용자로부터 데이터를 입력받아 보내는 것이다.

-->

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>입력양식 태그</title>

</head>

 

<body>

<!--

    form 태그의 필수 속성 

    ①action 속성: 서버에 있는 데이터를 처리하는 페이지를 지정

    ②method 속성: 데이터를 보내는 방식 지정

        ⓐGET 방식: URL에 데이터를 포함(http://www.kmc.com/update.jsp?id=syncjang&pwd=1234)시켜서 전달(보안성이 좋지않음), 

        ⓑPOST 방식: 많은 데이터를 한번에 전달할 때 사용하고 URL에 데이터를 포함하지 않는다.

    을 지정한다.

    

    input 태그의 필수 속성

        ①type 속성:입력하는 데이터의 형식을 지정

        ②name 속성:사용자가 입력한 데이터를 저장하는 이름을 지정

-->

<form action="update.jsp" method="POST">

    <ul>

        <li><input type="text" name="id" autofocus placeholder="아이디 입력" required></li>

        <li><input type="password" name="pwd" placeholder="비밀번호 입력" required></li>

        <li>취미:<input type="checkbox" name="hobby" value="영화감상" checked> 영화감상 

            <input type="checkbox" name="hobby" value="음악감상"> 음악감상

            <input type="checkbox" name="hobby" value="운동"> 운동</li>

        <li>성별:<input type="radio" name="gender" value="남자"> 남자

            <input type="radio" name="gender" value="여자"> 여자</li>

        <li>

            <select name="food">

                <option>==음식선택==</option>

                <option value="김밥"> 김밥</option>

                <option value="떡볶이"> 떡볶이</option>

                <option value="순대"> 순대</option>

                <option value="어묵"> 어묵</option>

            </select>

        </li>

        <li><input type="submit" value="회원가입"></li>

        <li><input type="reset" value="초기화"></li>

        <li><input type="button" value="버튼"></li>

 

        <li><input type="search" name="keyword" autofocus placeholder="검색어 입력" required></li>

        <li><input type="tel" name="tel" pattern="\d{3}[\-]\d{4}[\-]\d{4}" placeholder="전화번호 입력"></li>

        <li><input type="email" name="email" placeholder="이메일 입력"></li>

        <li><input type="url" name="url" placeholder="url입력"></li>

        <li>주문개수:<input type="number" name="num" min="1" max="10"></li>

        <li><input type="color" name="color"></li>

        <li><input type="range" name="size"></li>

        <li><input type="date" name="date"></li>

        <li><input type="datetime-local" name="datetime"></li>

        <li><input type="month"></li>

        <li><input type="week"></li>

        <li><input type="time"></li>

    </ul>

</form>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(3)  (0) 2021.07.13
CSS 선수학습(2)  (0) 2021.07.12
html 선수학습(6)  (0) 2021.07.08
html 선수학습(5)  (0) 2021.07.07
html 선수학습(4)  (0) 2021.07.06

+ Recent posts

티스토리툴바