728x90 전체 글104 Javascript - Variable 안녕하세요, 이제부터 프론트엔드 개발에 필수적인 자바스크립트 언어에 대해 정리하려합니다. 지금까지는 HTML/CSS를 위주로 정리하였었는데 자바스크립트까지 병합하여 정리하겠습니다. 정리하는 내용은 드림코딩 유튜브 채널에서 배운 내용을 기반으로 하고 자바스크립트 책을 참고하여 추가하였습니다! (드림 코딩 채널의 무료 강의 도움을 많이 받았습니다. 다들 시간이 많이 있으시다면 보시는 것을 추천드려요!) 내용 정리 완료 후에는 백준 및 프로그래머스 문제들을 풀어보려 합니다. 이제까지는 파이썬으로 풀었는데 자바스크립트와 친해질(?)겸 자바스크립트로 풀어보려 합니다. (파이썬이 더 풀기 쉬웠는데 ㅠㅠ) 오늘은 첫 시간으로 변수에 대해 정리하겠습니다. 변수란 데이터를 저장할 때 쓰이는 저장소입니다. Variable.. 2021. 6. 14. HTML/CSS - transition 안녕하세요, 오늘은 transition에 대해 공부해보겠습니다. transition은 CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 해주는 것입니다. 단축 속성으로 transition-properey, transition-duration, transition-timing-function, transition-delay가 있습니다. ◆ transition -. transition-property : 전환 효과를 사용할 속성 이름 (기본값 : all) -. transition-duration : 전환 효과의 지속시간 (기본값 : 0초) -. transition-timing-function : 타이밍 함수 지정 -. transition-delay : 전환 효과의 대기시간 설정 (기본값 .. 2021. 6. 13. HTML/CSS - flex(2) 안녕하세요, 지난 시간에 정리하였던 container에 부여하는 flex 속성에 이어서 오늘은 items에 적용하는 속성들에 대해 간단히만 정리하려 합니다! Items -. order : Item의 순서를 설정 (기본값 : 0) -. flex-grow : Item의 증가 너비 비율을 설정 (숫자가 클수록 큰 너비를 차지) (기본값 : 0) -. flex-shrink : Item의 감소 너비 비율을 설정 (숫자가 클 수록 큰 너비가 줄어듬) (기본값 : 1) -. flex-basis : Item의 (공간 배분 전) 기본 너비를 설정 (기본값 : auto / item 안의 요소의 너비가 item의 기본 너비에 비례) flex-basis만 간단히 코드와 결과 화면으로 확인해보겠습니다. Good job A He.. 2021. 6. 9. HTML/CSS - flex(1) 안녕하세요, 드디어! flex를 정리하려 합니다. 이때까지 수평 정렬을 하기 위해 display: inline-block;이나 float: left;를 사용하는 법에 대해 공부했었는데요, 이번에 정리할 flex를 배우게 되면 아주 손쉽게 수평/수직 정렬이 가능합니다! 간단히 block 속성 값을 갖는 div태그들을 flex를 이용하여 수평 정렬하는 것을 확인해보겠습니다. 아래 코드와 같이 container에 flex속성 값을 주는 것만으로 수평 정렬이 일어났습니다! (여기서 container의 자식 클래스인 item에 display: flex;를 적용하면 수평 정렬이 일어나지 않습니다! 이것은 container에 flex속성 값을 부여해야지 item개념이 생기기 때문인데요, 아래에서 추가 설명드리겠습니다.. 2021. 6. 8. 이전 1 ··· 12 13 14 15 16 17 18 ··· 26 다음
