[12/23] TIL

😊오늘 배운 내용

웹개발 종합반 강의 1주차 ~ 2주차

전체적으로 html의 구조, css 가져다 쓰는 법, 자바스크립트 기본 문법, jquery 기본을 배웠다.

 

[jquery]

jquery 사용법을 알았다.

function checkResult() {
        let people = [
            { 'name': '서영', 'age': 24 },
            { 'name': '현아', 'age': 30 },
            { 'name': '영환', 'age': 12 },
            { 'name': '서연', 'age': 15 },
            { 'name': '지용', 'age': 18 },
            { 'name': '예지', 'age': 36 }
        ]
        $('#q2').empty();

        people.forEach(a => {
            let temp_html = `<p>${a['name']}는 ${a['age']}살입니다.</p>`
            $('#q1').append(temp_html);
        });

 

[html]

영역을 지정하고 싶을 때 div 태그 이용

div에 클래스를 매기기 -> 무엇을 꾸밀지 정하는 것

 

[css]

부트스트랩 이용 시 head 태그에 cdn 임포트하고 해주기, jquery도 마찬가지

div에 클래스를 매긴 후 해당 클래스를 언급해 꾸미기

폰트를 적용하고 싶다면, 구글 폰트에서 import 후 style 태그에서 import 해주기, * {}를 이용해 전체 요소에도 폰트 적용 해주기

클래스 > 태그 : 해당 클래스 안의 태그에 css속성을 적용하겠다는 뜻

 

[기본적인 css 속성]

width

height

background-color

border: 픽셀 선종류 색깔;

border-radius

 

이미지를 백그라운드로 넣고 싶을 때 주로 사용하는 3줄 : 

background-image: url('');

background-position: center;

background-size: cover;

 

div로 지정된 영역 안에서 margin 값을 조정하고 싶을 때 : 

margin: 위 오른쪽 아래 왼쪽

auto -> 해당 방향에 해당하는 부분을 끝까지 가운데로 밀겠다는 뜻 

 

bordre 안 요소를 가운데로 정렬하고 싶을 때 : 

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

 

border 안 요소와 border의 간격을 조정하고 싶을 때 : 

padding

 

[어떤 문제가 있었는지]

처음엔 div 안에서 margin 속성으로 div안의 요소를 center 정렬하는 줄 알았다.

 

[내가 시도해본 것들]

직접 html 코드를 작성해 background-color를 지정해놓고 margin을 이용해서 div안에서 margin을 조정한다는 것을 확인했다.

margin: 30px auto 30px auto 한 결과

 

margin을 조정 한 후에 border안의 요소의 위치를 지정하고 싶을 때는 다음과 같이 적용한다.

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

 

[어떻게 해결했는지]

직접 코드를 작성해보며 깨달았다.

 

[무엇을 새롭게 알았는지]

margin은 div안 요소를 정렬할 때 쓰는게 아닌 div안의 margin 영역을 조절할 때 쓰는 것이다. margin을 조절하면 div안 border의 영역이 조절된다. border와 border안의 태그들과의 간격을 조절하고 싶을 땐 padding을 사용한다.

div안의 요소 (h1태그나 p태그 등등..)를 조절하고 싶을 땐 다른 코드를 이용한다.