[프론트엔드] 1주차 개발일지

HTML, CSS 기본내용

HTML은 뼈대, CSS는 꾸미기! HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.
또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.

CSS 기초

HTML 부모-자식 구조 살펴보기 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요!
- 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠!
- 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다.
- 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!

CSS 기초

CSS는 어떻게 사용하나요?

  <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다.
  아래 코드를 통해 간단한 사용 방법을 알아봅니다.
  
  mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!

모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿!
나머지는 검색해서 쓰시면 된답니다~!

배경관련
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-famliy
color

간격
margin
padding

자주 쓰이는 CSS 연습하기

1) 자주 쓰이는 CSS 연습하기 [연습할 것들]
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding
- (1) 튜터와 함께 아래와 같은 화면을 만들어볼까요?

margin과 padding ( → 헷갈리지 말기!)

margin은 바깥 여백을, padding은 내 안쪽 여백을

div에 색깔을 넣고, 직접 사용해서 차이를 비교해보세요!

 - **[코드스니펫] 이미지URL**
     
     ```html
     [https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg](https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg)
     ```
     
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>로그인페이지</title>
     <style>
         .mytitle {
             color: white;
             width: 300px;
             height: 200px;
             background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
             background-position: center;
             background-size: cover;
             
             border-radius: 10px;
             text-align: center;
             padding-top: 40px;
         }
     </style>
 </head>
 
 <body>
     <div class="mytitle">
         <h1>로그인 페이지</h1>
         <h5>아이디, 비밀번호를 입력해주세요</h5>
     </div>
     <div>
         <p>
             ID: <input type="text" />
         </p>
         <p>
             PW: <input type="password" />
         </p>
     </div>
     <button>로그인하기</button>
 </body>
 </body>
 
 </html>
 ```

(2) 만들어둔 로그인 화면을 가운데로 가져오려면? width를 주고, margin: auto를 사용하자!
그래도 안되면? display:block을 추가!

    ```html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>로그인페이지</title>
        <style>
            .mytitle {
                color: white;
                width: 300px;
                height: 200px;
                background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
                background-position: center;
                background-size: cover;
    
                border-radius: 10px;
                text-align: center;
                padding-top: 40px;
            }
    
            .wrap {
                margin: 10px auto;
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <div class="wrap">
            <div class="mytitle">
                <h1>로그인 페이지</h1>
                <h5>아이디, 비밀번호를 입력해주세요</h5>
            </div>
            <div>
                <p>
                    ID: <input type="text" />
                </p>
                <p>
                    PW: <input type="password" />
                </p>
            </div>
            <button>로그인하기</button>
        </div>
    </body>
    </body>
    
    </html>
    ```

태그종류

div = division : 구역을 묶어주는 역활
p = paragraph : 문단
h1 = 제목 : h2~h6 (점점 작아지는 글씨)
span : 전체 글 중 일부 글씨만 묶는것
a : 하이퍼링크 태그
text-align : center; 텍스트 중앙

background-image: url("")
background-size: cover;
background-position: center;
백그라운드에 이미지를 넣고 조절할때 이 세가지를 기억한다.

padding 안쪽 여백
margin 바깥 여백
margin : auto; 양쪽 여백이 동등해짐 (가운데 정렬)
display : block; 글 속성을 박스로 강제로 바꿔준다음에 옮겨주는 속성

<파이참 필수 단축키>
shift + tab 앞으로 오는 단축키
Ctrl + Alt + L 줄맞추기 자동정렬
컨트롤+ / 주석처리

<폰트 적용방법>
구글웹폰트- 링크복사후 밑에 복붙 후 아래 <style> 만들어서 그 안에는

{ 적용후 CSS rules to specify families 안의 문구 복붙 }

<CSS파일 분리방법>

<자바스크립트란?>
1.프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
2. 자바와 자바스크립트는 차이점이 없다
3. 웹페이지->마우스오른쪽 클릭 '검사'로 개발자도구에 들어가 콘솔탭으로 자바스크립트
실행을 미리 테스트(수정)해서 볼수있다.

<변수>

let A = 값을 담는 박스다
'문자열' = 문자열을 쓸때는 작은 따옴표를 쓴다
*변수이름을 지을때는 남이봐도 알아보기 쉽게 짓는다 ex ) let first_name = 'narae'
쉽게 지으면 나중에 헷갈리기 쉽기때문

<자료형> list
ex) let a_list = ['수박', '참외', '배'] 라 치면
a_list[0] 를 치면 "수박" a_list[1] "참외" a_list[2] "배" 가 출력된다
여기서 항목 추가를 원하면 a_list.push('감') 하면 감이 추가가 된다.

<자료형> dict
ex ) 키값에 대응되는 벨류 (질문 : 너 생일은 언제니? 대답 : 3월)
ex ) let a dict = {'name' : 'bob','age':27}
a_dict['name']
"bob"
으로 출력이 된다. 가지고 올때는 꺽쇠로 [] 선언할때는 중괄호로 {}
여기서 항목 추가를 원하면 a_dict['height'] = 180 적고
a_dict 를 적으면 height가 추가되어있음.

<기본 함수>
사칙연산 (+-*% )
등호 (> < == !== ) 같다는 등호 두번==, 같지않다는 !==로 표시

함수 : 정해진 동작을 하는것
return : 끝내고 나를 변신시켜줘

&& AND
|| OR
AND/OR 보다도 기본 if문을 제일 많이 씁니다.

<if문>

if문 예시 (아래는 특별한 경우이고 보통은 if와 else만 알면 좋다)

if (age > 20) {
console.log('성인입니다')
} else if (age > 7) {
console.log('청소년입니다')
} else {
console.log('아동입니다')
}

if : ~ 일경우 ~입니다.
else if : 그렇지 않을때
else : 나머지는

<반복문>
let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}

리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠
다시 아래를 복사 붙여넣기 해볼까요?

let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]

for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

Author And Source

이 문제에 관하여([프론트엔드] 1주차 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@skfo138/프론트엔드-1주차-개발일지