(웹개발 1주차) 코딩공부 일지

1주차 코딩공부 일지 

 

쓰라고 권장하니까 써본다. 

하긴 기록을 남겨서 안 좋을건 전혀 없으니까

메모를 조금 해보자면...

 

1. html / CSS의 기초 

htmk은 기반, CSS는 꾸미기 

입이 마르고 닳도록 하고 앞으로도 할 것 같은 말 ㅎㅎ

 

그 중 유용한데 까먹을 것 같은 것들 조금만 적어두자면... 

 

 

2. 기본적인 꾸미기

 

글씨색, 배경색, 가로 세로 사이즈 조절 

배경색은 투명도 가능

테두리 색깔, 두께, 선종류 선택

테두리 둥글게

바깥쪽 여백, 안쪽 여백 주기. 순서는 왼쪽부터 시계방향으로 왼 위 오 아래

        .mytitle {
            background-color: green;
            color: white;

            height: 250px;
            width: 250px

            background-color: transparent;
            border: 1px solid white;
        
            border-radius: 50px; /* 테두리 둥글게 */
            margin-top: 20px; /*바깥쪽 여백은 margin, 안쪽 여백은 padding! */​

       

3. 중간으로 정렬하기

손쉽게 정렬하는 4줄 코드

 

  display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 이렇게 4줄은 같이 다니면서 정렬 */

         

4. 그림자

위에서 말한 바깥 여백, 안쪽 여백 

auto도 쓸 수 있음. 

그리고 버튼이나 공간의 그림자 효과를 줄때 주는 방법. 

어느 방향으로 어느 픽셀이나 줄 것인지 설정하고 색깔 지정

     

  .mypost {
           
            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;

            box-shadow: 0px 0px 3px 0px gray; /*그림자*/

        }

     

     

5. 명령어를 잘 보라... 버튼 지정하는 방법! 

신박한 명령법. 버튼이라고 지정한 곳의 아래쪽에 있는 버튼들에게 명령하는 방법

이름을 쓰고 > 꺽세를 하나 적어주면 오케이. 

(난 이걸 까먹을 거 같은 느낌쓰..)

 

 .mybtn >button {
            margin-right: 10px;

        }

   

6. 부트스트랩 & Github

 

코딩은 누가누가 복붙을 잘하냐, 복붙 하면서 코딩 실수를 안하냐의 싸움일 듯 ㅋㅋ

특히나 프론트엔드는 이 코드들을 어떻게 조합해서 예쁘게 만들어내느냐의 감각 싸움 

이건 사실 경험도 중요하지만 미적 감각도 필요한 부분이라고 보여진다.  

부트스트랩이 모여있는 곳 

https://getbootstrap.com/

 

 

Buttons

 

그리고 내가 한 코딩을 웹에 배포하기 위해 사용하는 무료 사이트인 Github까지 

https://github.com/

 

이렇게 두루 사용해보면서 아주 기초적인 것들을 해보는 1주차 강의였다. 

숙제도 금방 끝냈고 ㅎㅎ 

나름 재미있게 강의 따라가며 오랜만에 코딩! 

코딩 세포가 점점 깨어난다잉~