내일배움캠프 1일차
오늘부터 9 to 9 으로 4개월 간 달려나갈 내배캠을 시작했다
웹개발 종합반으로 기초를 듣고 메이킹 챌린지로 협업 프로젝트를 간단하게 만들어본것이 전부지만 열심히 따라가서 꼭 완주에 성공하였으면 좋겠다
팀원들도 만나봤고 다들 좋은분이신거 같아 다행이다. 다만 내가 가장 코딩 경험이 적은거 같아 따라가기 벅차지않을까라는 걱정도 잠깐 들었다. 분발하여 도움이 될 수 있도록 하자
우선 1일차~1주차에서는 기존에 웹개발 종합반에서 배운 강의를 복습하는 시간을 가질 것이다
강의 내용 정리
웹프로그래밍 기초 강의 1주차
: 팬명록 만들기
폰트적용
https://hangeul.naver.com/2021/fonts/nanum
https://fonts.google.com/?subset=korean
위와 같은 폰트 사이트에 들어가서 URL과 CSS font-family 주소를 가져오면 된다
<head>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
<script>
// 원하는 CSS에 적용. * = 페이지 전체에 적용
* {
font-family: 'Nanum Brush Script', cursive;
}
</script>
</head>예쁜 CSS 사용하기
https://getbootstrap.com/
각종 CSS 템플릿을 제공하는 사이트에서 cdn 주소를 가져와서 헤드안에 붙여넣어준 뒤, 원하는 템플릿 코드를 복사하여 바디안에 붙여넣어주면 된다
타이틀 이미지 CSS
<script>
.mytitle {
width: 100%; // 좁은 너비에서도 잘리지않도록 퍼센트 설정
max-width: 500px; // 반응형 CSS를 위해 최대 너비를 정함
height: 400px;
color: white;
margin: auto; // 위, 우, 밑, 좌 순으로 여백 설정
// 이미지 url 앞에 linear-gradient 로 텍스트가 잘보이도록 이미지를 어둡게 할 수 있다
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://fashionseoul.com/wp-content/uploads/2020/11/20201125_J.ESTINA_02.jpg");
background-position: center;
background-size: cover; // 이미지 CSS 3종 세트 : image, position, size
// 이미지 내 요소 가운데 정렬을 위한 4종 세트
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</script>그 외 사용되는 CSS
padding: 20px auto 0 0;
: margin과 동일하게 상,우,하,좌 순으로 안 쪽 여백을 지정
box-shadow : 3px 3px 5px 3px gray;
: 테두리를 감싼 그림자 효과Author And Source
이 문제에 관하여(내일배움캠프 1일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wkdudhksl/내일배움캠프-1일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
