#1 웹 개발일지

#1 

브라우저의 역할: 요청하기, 받아와서 보여주기

 

1) HTML: 뼈대 ex) 배치

2) CSS: 꾸미기 ex) 폰트, 글자크기, 간격 등

3) 자바스크립트: 움직이는 거

-> frontend: 눈에 보이는 부분

 

서버가 프론트엔드를 줌

 

#2 HTML 뼈대 만들기 - 저지르고 보자

HTML은 head와 body로 구성

 

HTML의 대표적인 태그들

<div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

-> 다 외워서 쓰는 게 아니라 익숙해지기 전까지는 복붙해서 쓴다고 생각

 

tip +

1. 줄 맞추기: 컨트롤 + 알트 + L

2. 줄 정렬: 탭(들여쓰기), 시프트 탭은 돌아옴

 

#3 CSS 꾸미기

#3.1 자주 쓰이는 CSS

뭔가를 꾸민다는 것은 가리킬 수 있어야 꾸민다 !

ex) 이름표를 붙이고 그 이름표를 ~하게 하라고 명령하기

 

👉 배경관련 background-color, background-image, background-size, background-position -> 이미지 넣을 때 항상 같이

      사이즈 width, height

      폰트 font-size, font-weight, font-family, color

      간격 margin, padding

 

👉 margin은 바깥 여백, padding은 안쪽 여백

+ 전체를 가운데로 오게 만들기=양쪽 여백이 똑같아지는 것 -> 전체를 div를 이용해 하나로 묶은 후 width를 주고

margin:auto : 상하좌우 최대한 민다

 

#3.2 폰트, 주석, 파일분리

1) 폰트: title 밑에 붙여넣기

* 모든 태그에 먹이겠다

 

2) 주석

   - 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때

   - 코드에 대한 간단한 설명을 붙여두고 싶을 때

주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않지만 사람을 볼 수 있음 - 단축키: ctrl + /

 

3) 파일 분리

 

#4 부트스트랩, 예쁜 CSS 모음집

https://getbootstrap.com/docs/5.0/components/buttons/

Buttons

👉 내용물 가운데 정렬하기

display: flex;

flex-direction: column; 또는 row;

align-items: center;

justify-content: center;

 

+ 투명 - transparent

+ 마우스 올렸을 때 굵어지기 -  .mytitle > button:hover { border: 2px solid white;

+ 이미지 어둡게 하기 - background-image:(linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url 에 배치

 

👉 꿀팁 이모티콘 모음

https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

div를 쓸 때는 항상 background color를 주는 게 좋음 !

 

4) 모바일 처리하기

width: 95%;

max-width:  ~ px;

 

#5 javascript

자바스크립트: 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이며 표준

script창 = 오른쪽 클릭, 검사, console

프로그래밍 언어를 배울 때는 5가지 기억하기

-> 변수, 자료형, 함수, 조건문, 반복문

 

1. let a

2. let a_list - 순서 중요(0,1,2 순)

3. let a_dict - key:value 

 

+ 반복문 - a_list 부분만 바꿔주면 됨

for (let i = 0; i < a_list.length; i++) {
    console.log(a_list[i])
}