우당탕탕 코딩생활

See the Pen Untitled by siyeon kim (@doitsiyeon) on CodePen.

자바스크립트를 작성하다보면 반복되는 것이 많다는 것을 알 수 있습니다. 이것을 반복문이라 하는데 똑같은 것을 길게 늘여놓는 것을 자바스크립트는 싫어합니다. 물론 저도... 😅 이 반복문들은 불필요하기도 하고 가독성도 떨어지면서 관리하기도 쉽지 않아집니다. 그럴 때, for문을 사용하면 편하고 깔끔해집니다. 그럼 알아볼까요? for문 자바스크립트에서 가장 많이 사용하는 반복문입니다. 이 친구는 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 매우 편리합니다.예를 들어 구구단 같은거죠. 저는 for를 공부할 때 실행순서가 가장 헷갈렸는데요. 초기값은 처음에 한 번만, 나머지 조건과 명령 실행, 증가식을 반복한다고 생각했습니다. 예제를 한 번 살펴볼까요? 벌써 어지러운데요. 차례대로 천천히 살펴..

🥲초보는 오늘도 공부합니다. 코딩과 웹 공부를 시작한지 얼마되지도 않았는데 벌써부터 절망을 느끼고 있어요. 하지만 꾸준하게 하다보면 언젠가 저도 괜찮아지겠지, 그렇게 생각하며 블로그에 글을 씁니다! 오늘은 HTML중에서 SECTION이라는 요소를 알아보려고 하는데요. HTML5에 새롭게 추가된 요소로서, 섹션을 표시합니다. 예시를 보면, 제목 본문 여기서 섹션이라는 요소의 용도 '내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도' 입니다. 쉽게 말해 같은 성격의 내용, 즉 관련있는 내용을 section에 묶어서 표시하는 겁니다. 이렇게 section을 사용하게 되면 장점이 뭐가 있을까요? 광고나 뉴스 섹션처럼 서로 다른 성격을 가진 것들을 이 섹션요소로 표현해주면 영역 구분이 아주 명확하구요. 문서 ..

오늘은 자바스크립트의 연산자를 배워보려고 합니다. 연산자! 듣기만 해도 알 수 있지만 뜻을 사전적으로 풀의하자면 특정한 작업을 하기 위해서 사용하는 기호를 의미합니다. 작업의 종류에 따라 대입 연산자, 산술 연산자, 비교 연산자, 논리 연산자 등이 있습니다. 하지만 우리는 초보 코딩러! 가장 기초적인 연산자에 대해서 알아보겠습니다. 산술 연산자 수학적인 계산에 사용되는 연산자입니다. 수학 연산자와 기호가 약간 다르므로 아래 이미지를 살펴보겠습니다. + 연산자 산술 연산자 중 + 연산자는 +를 기준으로 좌우에 숫자가 아닌 문자나 변수등이 오면 더하기가 아닌 연결 연산을 합니다. var subject = 'css'; var score = 100; console.log(subject + '과목 성적은' + s..

See the Pen Tail Animation by siyeon kim (@doitsiyeon) on CodePen. HTML로 간단한 애니메이션을 만들어 보았습니다.

안녕하세요.🥰 지난 게시물에서는 CSS의 스타일에 대해서 알아봤는데요. 오늘은 '선택자(selector)에 대해 알아보겠습니다. 선택자란 CSS로 UI의 어느 부분을 디자인 할 지, 즉 표현할 대상이 되는 부분을 말합니다. 아래 이미지를 살펴보겠습니다. CSS를 배우지 않았더라도 어림짐작은 할 수 있죠. 예를 들어 H는 헤더라던가, color는 색이라던가. 맞습니다만, 이런 명칭을 CSS에서는 이렇게 정의해주고 있습니다. 어렵지 않죠? { }안에 여러 속성을 지정할 수 있고, 각 속성 설정간에는 ;로 구분해줍니다. 이제 자연스럽게 선택자에 대해 알아보려고 합니다. 우리가 정확하게 알아야할 선택자는 2가지인데요. 바로 id 선택자와 class선택자입니다. 얼핏보면 비슷하고 하는 일도 비슷한 친구들인데 알아..

CSS (Cascading Style Sheets )에는 세 종류가 있습니다. 내부 스타일시트, 외부 스타일 시트, 인라인 스타일입니다. 내부 스타일 시트 css 파일을 따로 생성하지 않고 HTML의 문서 안에 외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방식입니다. 이 때 스타일은 *.css확장자를 가진 별도 파일로 저장하고, HTML에서는 태그를 이용하여 선언해주어야 합니다. 외부 스타일시트 코딩공부 스타일 파일을 연결해주어야합니다. 결과는 상단과 동일합니다. @import 도 사용 가능합니다. @import는 CSS안으로 다른 CSS 파일을 불러들일 경우 사용하며 CSS 맨 윗줄에 기술합니다. 스타일 시트 포함 . . 코딩공부 역시 결과값은 같습니다. 인라인 ..

자료형 (Data type) 프로그램에서 처리할 자료의 형태를 말하며 3이라는 숫자를 숫자로 처리하는지, 문자열로 처리하는지에 따라 결과값이 달라집니다. * 자료형은 '데이터 유형'이나 '데이터 타입'이라고도 합니다. 사람은 숫자와 문자를 구별할 수 있습니다. 하지만 컴퓨터는 모르기 때문에 일을 시키기 위해서는 이것은 숫자이니 더하거나 빼야하고, 저것은 문자열이니 더하거나 뺄 수 없다는 것을 알려 줄 필요성이 있습니다. 이렇게 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정해야 하는데, 이러한 자료의 형태를 '자료형'이라고 합니다. 자바스크립트의 자료형은 크게 '원시 유형'과 '객체'로 나뉘어집니다. 자료형에 대해 알아보기 전에 알아야할 것이 있습니다. typeof()함수입니다. typeof()..

★시멘틱 마크업 (Semantic markup) 시멘틱의 사전적인 뜻은 '의미론적인'정도로 해석할 수 있는데 이는 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 쉽게 말해 '의미론적인 HTML 태그 작성' 으로 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것입니다. * 마크업 (Mark up) : HTML 태그로 문서를 작성하는 것 시멘틱 마크업의 작성 방법 의미를 잘 전달하기 위해서는 각 태그를 그 용도에 맞게 사용해야 합니다. 즉, 코딩을 할 때 의미가 없는 요소를 사용하기 보다는 아래와 같이 용도에 맞는 태그를 사용하여 작성하는 것입니다. 헤더에 사용 메인 컨텐츠에 과 사용 좌측과 우측 사이드 위치 공간으로 참고가 될 수 있는 컨텐츠에 사용 페이지 사이트, 애플리케이션..

블록 레벨 요소 (Block-leverl Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 쉽게 말하면 '가로 정렬'이 되지 않는다는 뜻으로, 항상 새 줄에서 시작하며 전체 너비를 박스 형식으로 사용하게 되는 구조입니다. 인라인 요소 (Inline Element) 인라인 요소는 블록 요소와 달리 마크업을 할 때 가로로 정렬이 됩니다. 즉, 줄 바꿈의 특성이 없다는 뜻으로 행이 바뀌지 않고 한 줄로 출력이 됩니다. 자주 쓰이는 요소들을 정리해 보겠습니다. 요소 속성 변경 블록 요소를 인라인 요소로, 인라인 요소를 블록 요소로 속성을 변경 할 수 있습니다. {display:inline;} / {display:block;} 을 사용해봅시다. {display:inline;..