html, css, javascript기초

Tue, 14 Dec 2021 00:12:27 GMT

html, css, javascript 기초

css

이미지 삽입과 이미지 중앙정렬 및 사이즈 맞춤

background-image: url("");
background-size: cover;
background-position: center;

중앙정렬

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

거의 flex-direction만 row or column 중 하나를 선택해서 적용함. row는 글들을 가로로 정렬시켜주고 colum은 글들을 세로로 정렬시켜준다.

텍스트창 입력 박스

margin: 바깥여백을 주고 싶을때 사용 padding: 안쪽여백을 주고 싶을때 사용 width: 100% -> 창크기를 줄여도 언제나 꽉차게

박스 색상을 배경이미지에 투명하게 반영하고 싶을때

background-color: transparent;

이미지 어둡게 하고 싶을 때 (이미지가 어둡고 글이 밝아야 잘 보이기 때문에 쓰인다.)

linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("이미지url")

구글 웹폰트 적용하기

구글 웹폰트 사이트에 들어가서 적용하고 싶은 글꼴을 선택하고 link ~~ 부분을 title 밑에복붙한다. 그리고 * {} 전체적용을 하고 싶을때 사용. 코드블록 내에 font- family 부분을 복붙한다.

구글 폰트 적용시 내가 미리 추가한 폰트와 구분해서 코드 복붙하기(전에 추가 되어진 폰트코드와 헷갈리는 경우 있음)

파일 분리 css파일을 새로 만들어서 불러와서 사용. 불러오는 법:

부트스트랩 익히기 부트스트랩을 이용하여 좀 더 간편하고 이쁘게 작성할 수 있다.

모바일 화면에서도 박스들이 깨지지 않게 하려면 박스를 잡은 후 max-width와 width를 설정해주면 된다. 예시)

Javascript

자바와 자바스크립트는 아무관련이 없다는 사실. ~~JavaScript는 당시의 무겁고 잘 알려진 Java를 대체하는 언어로 자리매김하고자 사용된 마케팅 전략~~

jquery + Javascript

1.입력값을 받아서 alert창을 띄워주기 $( '#id명' ).val()
2.input박스에 들어오는 입력값을 받아서 includes함수를 통해 특정 문자를 포함하고 있는지를 파악 조건이 일치하면 문자열에서 split함수를 통해 자르고 출력
3.input박스에 들어오는 값을 받아서 변수에 저장함. 변수를 li태그로 백틱으로 감싸서 temp_html변수에 저장 names-q3박스 밑에 append함수를 사용하여 태그를 붙임.

TIL (웹개발 1주차)

Sun, 28 Nov 2021 10:21:40 GMT

스파르타 코딩클럽 1주차를 끝마쳤다. 1주차에는 기본적인 웹의 보여지는 부분인 front end를 배웠다. html/ css/ javascript와 bootstrap을 이용하여 더욱 간편하게 코딩을 했다. 전에 배웠을 적에는 부트스트랩을 써보지 못했어서 아쉬웠는데 이번에 써보니까 훨씬 간편 한 것 같다. ~~염따 빠끄~~ 좋아하던 염따가 요즘 나락을 간다고 해서 힘을 주기 위해 팬명록을 만들었다. ~~염따형 사랑해~~

코드는 그렇게 어렵지 않았다. html을 시멘틱 태그와 부트스트랩을 활용해서 더 간편하고 간결하게 작성하였고 css에서는 박스를 중앙 정렬하는

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

이 코드를 사용하였다. 아직 갈 길이 멀다. 이제 기초중의 기초를 배웠다.

인터넷아 덤벼라

kid_code.log

html, css, javascript기초