<웹개발 1주차 배운내용>
브라우저의 역할_내가 요청한 자료를 가져다가 보여주기만 한다.
브라우저는 서버한테 요청을 함 → 서버는 HTML, CSS, Javascript를 제공함
이미 네이버는 받아왔기 때문에(다운로드 했기 때문에) 내 마음대로 고칠 수 있음
박스 나오면 무조건 div(구역)
박스의 경우 맨 처음 색 구분을 위해 컬러를 지정해 줄 것!
div는 처음 지정 시 한 줄을 다 차지함. 따라서 사이즈를 맞춰주어야함. ex) width: 300px; / height: 200px;
px은 코딩에서 쓰는 단위
border는 모서리 관련된 꾸며주는 태그(border, border-radius 주로 사용)
text-align: center 는 글자의 가운데 정렬
여백
바깥쪽으로 여백은 margin 사용 ex) margin: 20px 20px 20px 20px (위 오른쪽 밑 왼쪽 순으로 시계방향으로 설정)
안쪽으로 여백은 padding 사용 ex) padding: 20px 20px 20px
위 여백만 주고 싶은 경우 padding-top 사용 ex) padding-top: 30px;
배경(background)
배경은 항상 세 줄이 같이 다님(image / position / size)
ex) background-image: url(’ 이미지 url 링크 주소 ’);
ex) background-position: center(이미지의 가운데 부분);
ex) background-size: cover; (cover: 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소)
구역(div)과 문단(p)을 가운데 정렬하는 법
구역과 문단을 박스로 씌운 후 (div) 양쪽 여백을 같게 설정
태그 정렬하는 법 : shift + alt + F
- 주석: 개발자의 눈에는 보이는데, 컴퓨터한테는 안 보이는 것
→ 원하는 부분 전체 드래그 후 “ctrl + /” 클릭 시 초록색으로 바뀌게 됨
내가 아직 정해지지 않은 것에 대해 메모를 하고 싶을때
ex) 폰트 아직 고민중
주석의 경우 태그마다 모양이 다르므로, 단축키를 외우는게 핵심!
파일 분리: 내용이 너무 길어지게 되면 한 파일에서 보기 쉽게 하기 위함.
인터넷에 있는 코드를 가져오는 것을 library라고 부름
<부트스트랩, 예쁜 CSS 모음집>
css는 예쁘게 만들기 어렵기 때문에 누군가가 만들어 놓은 예쁜 코드 조각 혹은 꾸러미를 사용하는 것
가장 유명한 꾸러미는 부트스트랩
부트스트랩에 있는 코드 조각을 맞는 위치에 잘 붙이면 힘들게 코드를 입력하지 않아도 예쁘게 꾸밀 수 있음.
div의 내용물을 정렬시키려면
display flex : 내용물을 정렬시키는 방법
display flex는 항상 네 줄이 같이 다님(display: flex; / flex-direction: column; / align-items: center; / justify-content: center;) → 내용물을 세로로 정렬시켜라
display flex는 항상 네 줄이 같이 다님(display: flex; / flex-direction: row; / align-items: center; / justify-content: center;) → 내용물을 가로로 정렬시켜라
div 안에 내용물을 건드릴때 padding을 쓸 필요가 없음.
버튼은 마이타이틀 아래에 있는 버튼으로 .mytitle > button { } 이렇게 코드를 사용할 수 있음.
h1일 경우, .mytitle > h1 { }
background-color: transparent; → 배경색 없애기
border: 1px solid white; → 1픽셀의 실선 하얀색 이라는 뜻
button:hover {} → 버튼의 마우스를 올렸을 때 태그나 속성을 선택(효과를 주기 위해 사용)
ex) .mytitle > button:hover {border: 2px solid white;}
배경 이미지 어둡게 하기: background url 앞에 , (콤마) 넣고 그 앞에 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 입력
ex) background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(' 이미지 링크');
남이 만들어 놓은 코드를 쓸 때는 조금씩만 고쳐서 쓰는게 답!
부트스트랩 card 복사 후 사용 시, div를 만들고 복사 내용 삽입 ex) div class=”my cards”
코드 내용이 많은 경우 숫자 옆 방향 표시를 눌러 닫을 수 있음
card 코드의 md 는 한 열에 들어가는 카드 페이지 수를 의미
card 코드의 img 는 img 링크를 삽입하면 됨
코드를 한 세트 만들어서 필요한 만큼 복사하면 됨(복사 할 때는 방향 표시를 눌러 닫은 후 복사하면 편함)
box-shadow 는 그림자를 주는 것으로 아래 옆의 방향으로 부터 얼마나 먼지를 나타내며, 보통 3번째 픽셀(그림자의 길이)만 주로 바꿔 사용
지금 까지 만든 웹 페이지를 “정적 웹 페이지” 라고 함 → 페이지가 있고 내가 그냥 보는 것
정적 웹페이지는 배포가 간단함. 가장 대표적인 경우가 “모바일 청첩장”
인터넷에 코드를 업로드 할 수 있는 사이트
개발자들이 서로 협업을 할 때 코드를 올려 놓을 장소가 필요. 깃허브에 코드를 올려 놓음으로써 협업 실시
배포 방법
**- 배포 시 유의사항!
저장된 깃허브를 수정하는 방법
→ 코드 프로그램에서 수정 후 저장한 뒤, 깃허브의 code 클릭 후 index.html 클릭 → 연필 모양 클릭 → ctrl + a 를 눌러 싹 지운 후 코드 프로그램 수정 코드를 전부 복사 (ctrl + a) 후 깃허브에 붙여넣기 하고 commit changes 클릭 후 잠시 시간이 지나고 새로고침하면 완료