[sep 15, 2020] 코딩 #2
1. 나만의 도메인 구입하기
Google > 도매인 구매 검색 > freenom 사이트 > 사용하고픈 도메인 이름 입력
원하는 도메인 클릭 > get it out> checkout > 12개월 free >
꿀팁 :임시 이메일 (개인정보 보호 위해서)
google > 임시 메일 검색>m@akt 사이트>임의의 주소 가져오기 > 한시간 동안 사용 가능>인증
구입완료 > client area > 로그인
2. 내 사이트와 연결하여 DNS 등록하기
netlify와 제휴한 Let's Encrypt에서 무료로 제공하는 보안연결 기능.
>끝>더 전문적으로 보이는 사이트 완성.
-----------------------------------------------------------------------------------
CSS란? 앞서 배운 HTML을 꾸며주는 역할을 하는 언어.
특정 HTML요소 = 태그를 지정해서 그 위치를 옮기거나 크기를 변화시키거나
색을 변화시키는 등 HTML 요소에 변화를 줄 수 있음.
어떤 요소를 꾸며줄 것인지 앞에 작성해주고
대괄호와 대괄호 사이에 어떤 것을 어떻게 바꾸겠다, 하고 ;을 찍어줌
h1태그가 여러개 있을 때 각각을 다른 색으로 바꾸고 싶다면?
html과 css파일을 각각 만들어 주기
로고/검색창만 구현해보기
검색창 부분은 input태그로 작성하면 되는데
우리가 실제로 검색을 구현할거기 때문에
정보를 전송하는 태그인 <form>태그로 감싸주기
이제 CSS 활용할 차례
CSS활용하려면 HTML과 CSS 연결 시켜야 함.
HTML과 연결하는 <link>태그가 자동완성됨.
현재 같은 폴더에 있기 때문에 파일 이름만 적어주면 됨
이 세상 모든 개발자가 그렇듯
코딩하다보면 항상 아는 것만 나오지는 않음
만약 "CSS에서 가운데 배치하는 방법을 모른다"라고 했을 때
구글에 하고자 하는 행위를 검색.
google : css center 로 검색
복붙해서
중간으로 내리기.
f12.
더블클릭해서 직접 하나씩 숫자를 올려가면서 위치 조절도 가능
고로 이 h1태그 색 바꾸게 되면 전체가 바뀜.
각각의 태그로 다 글자들을 감싸줘야함.
일일이 하려면 오래걸림. ->VScode의 확장 프로그램 이용
감싸는거 쉽게 해주는거 다운 검색창에 htmltagwrap검색해서 해당 extension Install
사용법 나와있음 > alt + W
맥북프로 터치바 f키도 없고 alt도 안적혀잇어서..불편..ㅇ ㅏ.....
원하는 태그 블록 지정 후 alt+w > 바로 태그로 감싸지고 바로 수정 가능
다음은 색깔
원래 배운대로 하려면 각각의 요소에 다 class나 id를 주고 모든 클래스마다 색깔 줘야함
근데 시간 오래걸림 - 다른 방법 생각-
h1의 자식으로 모두 span 태그가 있으므로 h1의 자식 중에 첫번째, 두번째~이렇게 부를 수 있음
css child color 구글에 검색 후 알아보기
css: nth-child속성 이용- 특정 태그의 몇번째 자식을 선택해서 그것의 css를 따로 바꿀 수 있음
복붙 -css태그에 적용
p태그가 아니라 h1의 자손의 span태그 중에 선택하는 것
코드값 - 블루대신 코드값 입력
검색창 만들기
Documentation>components>Input group
이 사이트 외에도 materialize
미리 만들어놓고 css만 가져다가서 쓸 수 있도록 해둠
우리는 젤 간단한거. 처음거에서 두번째.
작성된 css는 적용했지만 진짜 css파일과 연결이 안됐으므로
class는 정의가 되어있지만 이class를 어떻게 꾸며줄지 써있는 css파일이 연결이 안됐으므로
적용이 아직 안됨
우리가 부트스트랩에 적용한거보다 우리가 추가로 꾸민게 더 우석 적용되어야 하므로
우리의 css파일 위쪽에 붙여넣기
이제 우리가 원하는 검색창 나타남
스타일에서 width 입력후 수정 -적용
가운데 옮기기
아까처럼 가운데로 가는 css적용 가능 그러나 새로운 방법 시도 -bootstrap에서 제공하는 것 사여ㅛㅇ
크기 조절을 원하는 div에 search-bar 입력하고
완료.
미리 만들어 둔 것 있음
bootstrap 검색창 - center 검색
이렇게 하면 따로 css작성안해도 가운데로 슝.
검색창-로고 사이 간격 주는 것도 미리 만들어 둔 것 있음.
입력창 좀 더 둥글게
이외에도 다양한 css 모아둔 유용한 사이트
codepan
css search bar 검색해보기
html/css 복사해서 사용 - 저작권 유의