웹개발 종합반 1주차

무료 강의를 몇번 들어보다가 이제서야 강의 등록을 하고 시작했다.
재미있어서 1주차 다 들어버렸다.
이미 알고 있던 토막지식들이 연결되는 느낌이다.

잊지 않았으면 하는 노트

브라우저 줄거있냐 가져다가 보여주기만 한다. 서버에게 요청후 시각화

HTML 뼈대
CSS 꾸밈
JAVA 움직이기

<div> </div>
박스, 구역
사용시 배경색을 넣어주고 시작하면 구역이 보이므로 쉽다.

<span> </span>
특정 글자

H1
페이지 혹은 문서의 제목 검색시 구글이 가져갈 이름

여백
padding 안으로 여백
margin 밖으로 여백
padding: 위 오른쪽 밑 왼쪽; 시계방향으로

혹은 padding-top, left, bottom...

*{}
모두다 적용

내용물 정렬

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

• 디스플레이 플렉스 내용물 정렬 디브 안에 있는 내용물 이걸 사용하면 좋음 넷이서 같이 다님
• 상황봐서 수정해가며 사용

백그라운드 삼총사

            background-image: url(https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg);
            background-position: center;
            background-size: cover;

• 얘네도 셋이서 자주 같이 다녀
• 외울것 없이 갖고 있다가 복사 붙이기로 사용하기

hover

  .mytitle>button:hover {
            border: 2px solid white;
            padding
        }

• 마우스를 올리면 달라지는 css. 이런 류를 많이 알아두면 편할 듯함.

.제목 > 그 아래 소분류

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
        .mybtn > button {
            margin-left: 10px;
        }
    </style>

• 소분류 아래로 지정하기 굳이 class로 이름 지어 주지 않아도 저격

부트스트랩

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

• CSS부분만 파일을 새로 만들어 구동 가능. 불러와서 적용 시킴
• 그말인 즉슨 남의 라이브러리도 가져올수 있음.
• 부트스트랩을 이용하면 꾸미기가 쉬워짐. 남이 만들어 둔것.

유용한 단축어

정렬 shift Option F
주석 드래그 Command shift slash
{} Option 5