프론트엔드2

프론트엔드/프론트엔드

프론트엔드2

study_yeon 2023. 4. 16. 00:35

2023. 4. 12.

1교시

●html2 파일 생성하여 vsc에 불러오기
*Dom 구조
head 부분의 title에 웹페이지 이름 설정
<title>Dom 구조</title>

●시멘틱태그 : 의미있는 태그, 문서구조를 나타내기 위한 태그
header 머리말(제목, 회사이름, 로고)
nav 내비게이션(안내말, 메뉴, 목차, 문서연결)
section 본문내용(콘텐츠 영역)
article 상세내용
**section과 article은 상황에 따라 안밖으로 사용 가능, 다중사용 가능
aside 배너광고, 보충설명
footer 꼬리말(회사이름, 전화, 주소, 링크)
adress, iframe 등

*<div class="menu"> 를
<nav> 로 나타냄으로서 문서구조를 알 수 있음.

●display(배치하겠다)
display : flex; //세로로 출력된 태그(요소) 가로로 정렬, 부모태그에 작성
->웹 접근성이 안좋음(크롬은 작동 잘 되지만 사파이어에서는 오류)

●justify-content             //flex 정렬된 태그의 가로 조정
justify-content: center; // 자식태그 가운데 정렬
justify-content: space-between; // 처음-왼쪽 마지막-오른쪽 나머지는 균등하게 정렬(태그 사이 공간 생김)
justify-content: space-around;  // 태그들의 간격을 왼쪽,오른쪽에 차지하는 비율이 같게 정렬
justify-content: space-evenly;  // 태그들의 간격이 균일(일정)하게 정렬

●rem; // 기본 글자크기를 기준으로 크기를 지정(root)- 기본 16px
ex) 2rem; //16*2=32px
*기본을 수정하고 싶으면 css에 html{font-size: 16px;} 작성하고 숫자(16) 수정

2교시

●웹아이콘 : 그림처럼 보이는 글씨(구글 제공 https://fontawesome.com/)
head 부분에 사이트 링크 붙여넣기로 연결 (홈페이지 kit에 있는 것 복사)
<script src="https://kit.fontawesome.com/cfba439c37.js" crossorigin="anonymous"></script>

body 부분에 div 또는 p를 사용하여 원하는 아이콘의 코드 복사해서 붙여넣기

●웹폰트 : 인터넷에서 제공하는 글자 폰트
폰트(ex.눈누) 링크에서 원하는 폰트의 링크 복사해서 css 맨 위에 붙여넣기(@import url(~~))
변경하고자 하는 위치에 font-family: Black Han Sans(폰트명); 입력하면 폰트 변경 됨

●표기
카멜표기법 sec1Title
파스칼표기법 Sec1Title
스네이크 표기법 sec1_title

3교시

●position 설정은 부모 태그를 기준으로 함
부모 : relative(상대적 위치-순서대로 설정)
자식 : absoulute(절대위치)
position: fixed;
absoulute;
relative;
top, left, right, bottom 설정할 수 있다.(위치 조정)
*header에 fixed top: 0 left: 0 이고 height를 100px으로 설정했다면
nav에 top: 100px로 설정하여 내용이 겹치지 않게 할 수 있다.
*z-index : 레이어 개념(숫자가 클 수록 위로 올라옴)

●화살표(버튼) 만들기-빨간 동그라미

☞html 부분
<article class="art1">
<div>
       <img src="./img/car4.png" alt="">  //자동차 사진
</div>
<div class="btn">
       <p>왼쪽</p>  //폰트어썸 아이콘 링크 연결하기
       <p>오른쪽</p> //폰트어썸 아이콘 링크 연결하기
</div>

☞ css(버튼 디자인 변경)
.art1 .btn{          //art1클래스의 btn클래스(화살표)를 디자인하겠다
    width: 90%; height: 50px;
    border: 0px solid black;
    display: flex;  //가로 정렬(부모태그에 써야 함)
    justify-content: space-between;  //태그 자간 양쪽 끝으로 정렬
    margin-top: -200px;  //화살표 위치 조정, 음수의 값을 주면 위로 올라감
    margin-left: 5%;        //화살표 위치 조정, 왼쪽 여백 생김
}
.art1 .btn p{    //버튼 상자의 크기
    width: 5%; height: 50px;
    border: 0px solid black;
}

클릭해서 넘어가는 것은 자바스크립트의 영역이므로 여기까지.

●목차 표시
-ul : 순서 없는 목록 태그 (블릿기호 표시)●으로 목차 표시
(li를 사용하는 것이 규칙)
-ol : 순서 있는 목록 태그(숫자 표시)
*div 로도 만들기 가능(동일한 방법임)
*ul에서 ● 없애기
list-style: none;

●border-radius: 100%; // 테두리 각도 조절(50% 이상부터 원이 됨)

빨간 동그라미 부분의 숫자 테두리가 동그랗게 설정 됨

▶해당 구조를 만드는 법을 알아보자

●이 부분은 css시작 부분에 필수로 적어야한다고 한다. 잊지말자.
*{                                //모든 태그에 적용하겠다
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
html{font-size: 16px;}  //폰트사이즈 기본 값 16(원하면 변경)

●테두리를 만들자
<body>
    <article class="at1">         //검은색 테두리
        <div class="menu">     //div는 파란색 테두리
            <p>카테고리</p>       //menu속의 p들은 초록색 테두리
            <p>남성복</p>
            <p>여성복</p>
            <p>아동복</p>
            <p>악세사리</p>
            <p>가방</p>
            <p>신발</p>
        </div>
        <div>
            <p><img src="img/car1.png" alt=""></p>  //마지막 div의 p들은 빨간색 테두리
            <p>수소차</p>
        </div>
    </article>
</body>

●디자인을 해보자

1. artcle 의 사이즈를 조정한다
at1은 두 개의 div의 부모이므로 flex를 사용하여 가로정렬 가능!
정렬 후  justify-content: center; 를 사용하여 가운데 정렬(검은 테두리 내부의 것이 조정 됨)

2. at1의 두 개의 div의 높이와 여백을 조정함(파란 테두리)

*왼쪽(menu)
3. menu부분의 길이는 200px로 오른쪽 여백은 50px로 설정(파란 테두리 중 menu 만 설정)

4. menu항목에 있는 p의 길이를 menu 크기의 80% 높이를 40px 로 설정(초록 테두리가 조정 됨)
margin을 통해 여백을 10px주어 초록상자 사이의 간격 조정하고 가운데 정렬

5. menu항목의 첫 번째 상자(카테고리)의 여백만 조정하고 싶다면
.at1 .menu p:first-child{      //at1 클래스의 menu 클래스의 p의 첫 번째 아이(카테고리)를 가르키는 것
    margin-top: 50px;
    margin-bottom: 50px;
}
상단의 방법으로 호출한 뒤 여백을 위, 아래로 원하는 값으로 설정하기

*오른쪽(사진)
6.  사진 부분의 길이는 800px로 설정(파란 테두리 중 마지막div만 설정)

7. 마지막 div(사진 부분)의 테두리는 빨간색으로 설정

8. 마지막 div의 첫 번째 p의 높이 설정

9. 마지막 div의  두번째 p의 높이 설정

10. al1 클래스의 div의 p를 모두 가운데 정렬함
text-align: center;

11. al1 클래스의 div의 p의 사진의 길이와 위치를 조정 (검은색 테두리)

*디자인을 할 때 html에 적은 순서대로 (글자가 들어 갈 경우) css 부분에 테두리를 그리면서 작성을 해야한다.

*구상을 할 때는 디자인만 구성 할 것이 아니라 디자인을 할 때 사용 할 시멘틱 태그 등 의 구상이 필요하다.

오늘의 후기
-position에 대한 이해가 어려웠다
-오전에 강사님을 따라 실습을 하고 오후에 혼자서 비슷한 디자인을 하게 되었는데 내 맘대로 되는게 없었다
•시작하기 전 디자인 구상을 하지 않았던 것이 첫 번째 문제였고
•html에 적은 내용을 css에서 테두리를 그리며 순서대로 디자인을 해야하는 것을 몰랐다
•html에 모든 내용을 먼저 채우고 css에서 디자인 하려고 했더니 너무 난잡해서 보기 힘들었다
-> 상세하게 내용을 적기 전 ‘숫자 123, 문자, 그림’ 등의 간단한 내용으로 테두리를 잡는 것을 우선으로 두자.
*어려워 하는 친구들이 많아 결국 다시 수업을 반복해주셨다 !
그제야 잘 못된 점을 알게된 나(복습이 중요하구나를 새삼 느끼게 됨)
-1일차에 과제하면서 답답했던 점이 해결되었다!
•html에 적은 내용은 css에서 필수로 언급이 되어야 하며 순서대로 작성을 해야 꼬이지 않는다
•하지만 이런 내용을 몰랐던 나는 내가 디자인하고 싶은 부분만 css에 뒤죽박죽 적고 있었다 ! (머쓱)