[개발일지] 웹개발 종합반 1주차 HTML, CSS, Javascript 기초

스파르타코딩 웹개발 종합반 1주차.

프로그램 준비.
- Pycharm Professional 설치
https://www.jetbrains.com/pycharm/download/

- PyCharm Professional 등록
스파르타코딩을 통해 라이센스코드를 받아 4개월간 무료 사용
젯브레인 로그인 - 인증
https://account.jetbrains.com/login

- AWS 가입(5주차때 배포를 위함)
https://portal.aws.amazon.com/billing/signup#/start

HTML과 CSS의 개념

HTML은 뼈대, CSS는 꾸미기
HTML은 크게 head와 body로 구성
head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.

HTML 기초

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <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>

-> 여기서 <hr>은 구분선

CSS 기초

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

사이즈
width / height

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

간격
margin / padding

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

폰트 바꾸기

https://fonts.google.com/?subset=korean
사이트에 들어가서
1. 원하는 폰트를 고르고
2. Select this style라는 파란 글씨를 누르면 사진처럼 우측에 코드가 표시된다.
   만약 안나오면 우측상단을 눌러보면 창이 표시된다
3. 링크 부분을 복사해서 <head> 안에 넣는다.
4. 위에 링크를 넣었으면 아래 쪽에 CSS부분을 복사해서 <style> 안에 넣는다.
만약 전체 태그에 폰트를 적용하고 싶다면 앞에 * 을 사용해서 넣어준다.
예시)
<style>
        *{
            font-family: 'Jua', sans-serif;
        }
        .mytitle {
            background-color: green;
            width : 300px;
            height: 200px;
            ...이하생략

부트스트랩 (bootstrap)
부트스트랩이란? 예쁜 CSS를 미리 모아둔 것
https://getbootstrap.com/docs/5.0/components/buttons/

부트스트랩 시작 템플릿
https://getbootstrap.com/docs/5.0/getting-started/introduction/
해당 주소로 들어가보면 아래쪽에 Starter template 부분을 복사해서 사용한다.

부트스트랩을 사용하기위해서 필요한 셋업으로 자세히보면 메타 태그등이 포함되는데
무슨뜻인지 자세히 해석할거 없이 그냥 갖다 쓰자

이미지 넣기

<style> 안에

.mytitle{
            background-color: green;
            height: 250px;
            width: 100%;

            background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
            background-position: center;
            background-size: cover;

여기서 background-color: green; 이부분은 만들면서 일단 영역 확인하려고 넣었던거라 이미지를 가져온 후에는 삭제해도 무방하다.

이미지 어둡게 설정하기

background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://movie-

여기서 이부분(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 을 보면
rgba 괄호안에 4번째 숫자가 0.5가 되어있는데 어두움을 설정하는것으로 1로 설정하면 아얘 까맣게 보인다.

둘다 (0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 로 설정하면 이미지 원래 기본 밝기로 표시된다.

rgba가 두개인데 앞에 있는 rgba의 4번째 숫자를 1로 했을때 아래쪽부터 어두워지는것을 볼수 있다.

앞에쪽에 rgba숫자를 건드리면 아래쪽이 어둡고, 뒤에 rgba를 건드리면 위쪽이 어둡게 된다.

둘다 1이면 그냥 검정색만 보임

꿀팁 - 이모티콘 모음
⭐⭐⭐
https://kr.piliapp.com/facebook-symbols/

퀴즈 - 포스팅박스 만들기
-> 부트스트랩에 들어가서 비슷한걸 찾아서 사용한다.

팁. 큰 박스 만들기 (그림자효과, 패딩효과 주기)
→ 그림자 효과: `box-shadow: 0px 0px 3px 0px gray;`
→ 안쪽으로 띄우기: `padding: 20px;`

여기서 그림자효과 설정을 건드려보면 세번째 px만 건드렸을때 은은하게 그림자가 생기는걸 볼수있다.
나머지는 별로 쓸일이 없을듯,
padding을 0으로 주면 사진처럼 딱 필요한 입력부분만 표시되서 꼭 넣어야 할것 같다.

팁. - 모바일 처리를 해두기⭐⭐⭐⭐⭐
  👉 모바일에서는 "가로 사이즈"가 가장 문제랍니다!
    - 어디서나 500px 로 맞춰라 (width: 500px) 대신에,
    - 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘 라고 할 수 있다면?

.mypost{
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;
            box-shadow: 0px 0px 4px 0px gray;
            padding: 20px;

            display: none;
        }

-> 이제는 절때 빼먹을수 없는 필수적인 설정이니 항상 확인!

Javascript
- 자바스크립트란?
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.

사용하기위해 일단 먼저 사용할 장소에 먼저 함수를 만들어본다
<script>
function hey(){
alert('안녕!');
}
</script>
-----------
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성.
<script> ~ </script> 내에 자바스크립트를 작성
------------
함수를 만들었으면 <body>에 사용할곳에 호출할수있도록 연결한다.
<body>
<div class="mytitle">
<button onclick="hey()">영화 기록하기</button>

-> 버튼을 누르면 hey()함수를 호출하도록 되어있다

기초문법 연습
크롬 - F12 또는 마우스 우클릭 - 검사 -> console 탭
console.log("Hello World!");
-> 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!

- 함수.

기본 생김새.
// 만들기

function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

-------------
예시.
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
-------------

이것 이외에 조건문 반복문 등 연습.

웹개발 기초도 공부해보고자 강의를 듣는다.

1주차는 별로 어려운게 없었다.

저작자표시

'코딩 개발일지' 카테고리의 다른 글

[개발일지] 웹개발 2주차 jQuery, Ajax 공부하기 (0)	2023.01.05
[개발일지]스파르타코딩클럽_앱개발 종합반 5주차 애드몹 (0)	2022.10.30
[개발일지]스파르타코딩클럽_앱개발 종합반 4주차 숙제 (1)	2022.10.24
[개발일지]스파르타코딩클럽_앱개발 종합반 4 Firebase (0)	2022.10.23
[개발일지]스파르타코딩클럽_앱개발 종합반 4-2 날씨 API (0)	2022.10.20

고양이실패단

[개발일지] 웹개발 종합반 1주차 HTML, CSS, Javascript 기초

'코딩 개발일지' 카테고리의 다른 글

티스토리툴바

[개발일지] 웹개발 종합반 1주차 HTML, CSS, Javascript 기초

'코딩 개발일지' 카테고리의 다른 글

'코딩 개발일지' Related Articles

티스토리툴바