본문 바로가기
학원/웹

10/19 웹수업

피자돈가스 2022. 10. 19. 17:40

08장 레이아웃 연습 및 이펙트 효과

1. 효과는 언제 주는게 좋은가?

ㄱ. css, js디자인, 기능 어느정도 정해진 후 . 

ㄴ. 그림자효과 (겹치는 효과)

ㄷ. 텍스트 그림자 효과

ㄹ. 박스 (오브젝트 - 사진 , 도형) 그림자 효과

ㅁ. 테두리 라운드 - 버튼 커스터마이징 할 때

 

 

2. html 안에 공백, 줄바꿈, 탭 으로 공백을 만들 수 있다. 

 그러나 문제점 -> 한개의 공백만 가능.

==> white space 속성

 

 

 

 

 

 

 

폴더 이렇게 쩜쩜 해야 찾을 수 있엉

 

 

 

-

로고 라는 글자를 이렇게 치워버리는 방법이 있다.

 

 

 

-

 

 

 

 

 

 

-글자가 가운데로 쏙

어...글자가 가운데에 들어가네

 

 

 

 

 

 

 

 

 

-

 

이렇게이상하다. 푸터를 밑으로 내려줘야겠다.-> 푸터에 클리어 보스 넣으면 

이렇게 된다. 옆에 선도 넣어줬따.

 

 

 

 

-

여기서 피규어는 일본음식 소제목 p 저것들이다. 

어.. 전체를 싸놓은 다음 다 왼쪽으로 옮겨놓고 오른쪽으로 넘길 것들(피규어) 태그를 따로 주고  플롯레프트와

위드스를 준 과정이었따.

 

그런데 중요사항

-> 이렇게 순서가 중요하다. 큰 틀부터 먼저 맞춰놓고 세세한 부분을 맞춰야된다.

 

 

 

 

 

 

 

-

오버플로우 오토 전후 차이

 

 

 

어음..

이부분. 선생님이 헤매셨다조금

 

 

 

 

 

-완성~!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="wrapper">

        <header>
            <h1>로고</h1>
            <nav>
                <ul class="menu">
                    <li><a href="">홈</a></li>
                    <li><a href="">교실</a></li>
                    <li><a href="">케이터링</a></li>
                    <li><a href="">소개</a></li>
                    <li><a href="">연락처</a></li>
                </ul>
            </nav>
        </header>

        <section class="courses">
            <article>
                <figure>
                    <img src="images/일본요리야채.jpg" alt="">
                    <figcaption>Bok Choi</figcaption>
                </figure>
                <div class="desc">
                    <h2>일본 음식</h2>
                    <h3>소제목</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Dolorum omnis reprehenderit
                        a! Similique ea molestiae vitae repellendus tempore quaerat voluptate ipsa
                        vel fugiat voluptas, sint, ab soluta dicta! Sint, doloremque.</p>

                </div>
            </article>
            <article>
                <figure>
                    <img src="images/일본요리간장.jpg" alt="">
                    <figcaption>Bok Choi</figcaption>
                </figure>
                <div class="desc">
                    <h2>일본 음식</h2>
                    <h3>소제목</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Dolorum omnis reprehenderit
                        a! Similique ea molestiae vitae repellendus tempore quaerat voluptate ipsa
                        vel fugiat voluptas, sint, ab soluta dicta! Sint, doloremque.</p>

                </div>
            </article>

        </section>

        <aside>
            <section>
                <h1>인기 요리법</h1>
                <a href="">오코노미야키</a>
                <a href="">오코노미야키</a>
                <a href="">오코노미야키</a>
            </section>
            <section>
                <h1>연락처</h1>
                <p>서울마포구</p>
                <p>합정동 서강빌딩 3F</p>
                <p>전화번호: 01- 555 - 4565</p>
            </section>
        </aside>

        <footer>
            <p>&copy;2010 Yoko's Kitchen</p>
        </footer>

    </div>

    <script src="js/jscript.js"></script>

</body>

</html>

 

스타일태그

body {
    background-color: brown;
}

.wrapper {
    width: 940px;
    margin: 0 auto;
    background-color: #ffffff;
}

header {
    height: 160px;
    background-color: #ededed;
    background-image: url(../images/일본요리로고.jpg);
    background-repeat: no-repeat;
}

header>h1 {
    text-indent: -4000px;
    height: 130px;
    margin: 0;
    /*h1 - 기본적으로 마진값이 있음*/
}

header>nav {
    background-color: #aeaca8;
    height: 30px;
}

nav>ul.menu {
    margin: 0;
    padding: 5px;
    /*메뉴가 인라인으로 가로배치인 경우*/
    padding-left: 30px;
}

nav>ul.menu>li {
    display: inline;
    /*paddng, margin*/
    /* border: 1px solid red; */
    margin-right: 40px;
    /*메뉴 글자 자간 벌리기*/
}

nav>ul.menu>li>a {
    text-decoration: none;
    color: white;
}

footer {
    background-color: #aeaca8;
    height: 30px;
    clear: both;
}

footer>p {
    color: #ffffff;
    margin-left: 30px;
    height: 30px;
    line-height: 30px;
}

.courses {
    width: 659px;
    float: left;
    border-right: 1px solid #aeaca8;
}

.courses>article {
    background-color: #ffffff;
    overflow: auto;
}

figure {
    float: left;
    width: 290px;
    padding: 5px;
    margin: 20px;
    border: 1px solid #cccccc;
    box-shadow: 2px 2px #aeaca8;
}

figcaption {
    font-size: 90%;
    font-weight: bold;
}

.desc>h2 {
    margin-bottom: 0;
}

.desc>h3 {
    margin-top: 0;
}

aside {
    float: left;
    width: 230px;
    padding: 0;
    padding-left: 10px;
}

aside>section {
    padding: 10px;
}

aside>section>a {
    display: block;
    text-decoration: none;
    color: orangered;
}

aside>section>p {
    margin-top: 0;
    margin-bottom: 0;
}

 

 

근데 뭐가 낫지?

body {
    background-color: brown;
}

.wrapper {
    width: 940px;
    margin: 0 auto;
    background-color: #ffffff;
}

header {
    height: 160px;
    background-color: #ededed;
    background-image: url(../images/일본요리로고.jpg);
    background-repeat: no-repeat;
}

header>h1 {
    text-indent: -4000px;
    height: 130px;
    margin: 0;
    /*h1 - 기본적으로 마진값이 있음*/
}

header>nav {
    background-color: #aeaca8;
    height: 30px;
}

nav>ul.menu {
    margin: 0;
    padding: 5px;
    /*메뉴가 인라인으로 가로배치인 경우*/
    padding-left: 30px;
}

nav>ul.menu>li {
    display: inline;
    /*paddng, margin*/
    /* border: 1px solid red; */
    margin-right: 40px;
    /*메뉴 글자 자간 벌리기*/
}

nav>ul.menu>li>a {
    text-decoration: none;
    color: white;
}

footer {
    background-color: #aeaca8;
    height: 30px;
    clear: both;
}

footer>p {
    color: #ffffff;
    margin-left: 30px;
    height: 30px;
    line-height: 30px;
}

.courses {
    width: 659px;
    float: left;
    border-right: 1px solid #aeaca8;
}

.courses>article {
    background-color: #ffffff;
    overflow: auto;
}

figure {
    float: left;
    width: 290px;
    padding: 5px;
    margin: 20px;
    border: 1px solid #cccccc;
    box-shadow: 2px 2px #aeaca8;
}

figcaption {
    font-size: 90%;
    font-weight: bold;
}

.desc>h2 {
    margin-bottom: 0;
}

.desc>h3 {
    margin-top: 0;
}

aside {
    float: left;
    width: 230px;
    padding: 0;
    padding-left: 10px;
}

aside>section {
    padding: 10px;
}

aside>section>a {
    display: block;
    text-decoration: none;
    color: orangered;
}

aside>section>p {
    margin-top: 0;
    margin-bottom: 0;
}

 

 

비교해보자 모바일 하하

'학원 > 웹' 카테고리의 다른 글

10/18 웹수업  (0) 2022.10.20
10월 17일 웹수업 (카카오 불나서 티스토리 작성이 안돼서 네이버블로그에 썻다 하하)  (0) 2022.10.20
10/14 웹수업  (0) 2022.10.14
10/13 웹수업  (0) 2022.10.13
👩‍🏫js/css-자바스크립트개념-특징,위치,출력,=,;,변수,변수규칙,let,const,사칙연산/리셋css/홈페이지영역/잼코드?/포맷도큐먼  (0) 2022.10.12

'학원/웹' Related Articles

티스토리툴바