웹개발 종합반 1주차

조혜주·2023년 3월 20일
0

그동안 자바 독학한다고 html,css에 손 놨었는데 SWcamp 등록하고 다시 시작.
얼마나 손을 놨었냐면 주석까지 까먹음 념념긋,,,ㅎ

다시 상기시키는 좋은 기회다. 게을리 하면 죽음뿐.

✏️ 1-5. HTML로 로그인 페이지 뼈대 만들기

<!--h1 : 제목(표제), h1~h6까지 있음-->
    <h1>로그인 페이지</h1>  
<!--<p>태그 : 문단 요소-->
    <P>ID : <input type="text" /></P>
    <p>PW : <input type="text" /></p>
<!--<button> : 인라인 요소, 단일 태그-->
    <button>로그인하기</button>

결과 :

✏️ 1-7. CSS로 로그인 페이지 꾸미기

 <style>
        .mytitle{	   /*h1에 적용되는 CSS*/
            color: red;
            font-size: 40px;
        }
        .mybtn{		/*button 태그에 적용되는 CSS*/
            font-size: 12px;
            color: white;
            background-color: green;
        }
        .mytext{	/*p태그에 적용되는 CSS*/
            color: green;
        }
</style>
<!--각 태그에 class 이름을 붙여줌-->

<h1 class="mytitle">로그인 페이지</h1>
<P class="mytext">ID : <input type="text" /></P>
<p class="mytext">PW : <input type="text" /></p> <!--class 이름이 같으면 같이 적용-->
<button class="mybtn">로그인하기</button>

결과

✏️ 1-8. 자주 쓰이는 CSS 연습하기(1)

🔑 주요 keyword : div margin padding

박스가 나온다? ➡️ div (구역)

    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력하세요</h5>
    </div>

div 적용 시 :

div 크기 변경하기

 <style>
        .mytitle{
            background-color: green;

            width: 300px; /*너비*/
            height: 200px; /*높이*/
        }
 </style>

div 크기 변경 결과

margin : 바깥쪽 여백

.mybtn{
        margin: 20px 20px 20px 20px;  /*상-우-하-좌 순(시계방향), 전체 값이 같을 경우 한번만 입력해도 됨.*/
        }

margin 크기 변경 결과

padding : 안쪽 여백

.mybtn{
		 padding: 20px 20px 20px 50px; /*순서는 margin과 동일*/
        }

margin 크기 변경 결과

/*h1 로그인페이지 안쪽 여백 위치 조정하기*/
padding-top: 30px; /* = padding: 30px 0px 0px 0px; */
            
/*이 3개는 set*/
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center; /*이미지의 보여질 위치*/
background-size: cover; /*이미지가 꽉 맞게 나옴*/

결과

✏️ 1-9. 자주 쓰이는 CSS 연습하기(2)

🔑 keyword : auto

 .wrap{
            /* background-color: green; 맨 처음 사이즈 확인용 */
            width: 300px;
            margin: 20px auto 0px auto; /*auto로 좌 우 여백 정렬*/
        }

결과

✏️ 1-10. 구글 폰트 사용하기

https://fonts.google.com/?subset=korean

 <style>
        @import url('https://fonts.googleapis.com/css2?family=Hahmlet&display=swap');
        *{  /* * : 모두 다 */
            font-family: 'Hahmlet', serif;
        }
</style>

결과

✏️ 1-14 ~ 1-16

결과물

.mytitle {  /*[내 생애 최고의 영화들]*/
            color: white;

            height: 250px;
 			
            /*4줄 set. 내용물을 정렬*/
            display: flex;
            flex-direction: column;
            /*세로 정렬 : column, 가로 정렬 : row */
            align-items: center;
            justify-content: center;


            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
            url('이미지 url 입력하는 곳');
            background-position: center;
            background-size: cover;
        }
.mytitle>button {  /*[영화 기록하기]*/
            width: 250px;
            /*mytitle 아래에 있는 button 소환*/
            height: 50px;
            background-color: transparent;
            /*button 배경색 없어짐*/

            border: 1px solid white;
            /*button 테두리 설정*/
            color: white;

            border-radius: 50px;
            /*모서리 둥글*/

            margin-top: 20px;
            /*h1과 간격 띄우기*/
        }

.mytitle>button:hover {
            /*마우스 올렸을 때 굵어지게 효과 주기*/
            border: 2px solid white;
        }
 .mypost{ /*[기록하는 부분]*/
            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px;

            box-shadow: 0px 0px 3px 0px gray; 
            /*가운데로부터 그림자 길이 조정*/
        }

📝 느낀점

  • 분명 작년 겨울에 독학한 내용인데 기억이 다 휘발되었다는 자괴감.
  • 벌써 호락호락하지 않다.
  • 복습하면서 익숙해져야 겠다.
  • 또 잊어버린다면 사람 아니다.
  • 확실히 자바보다는 할 만 하다. 아직까지는
profile
내가 보려고 정리하는 블로그

0개의 댓글