멋쟁이사자처럼🦁

- 💬 나의 주저리주저리 원래 근무하던 호텔이라는 전혀 관련없던 분야에서 컴퓨터라는 거대한 이과적(?)인 분야에 내가 도전할 줄을 꿈에도 몰랐다. 기본적인 디자인툴이야 혼자 심심해서 어도비 정기 결제(광기..)까지 하면서 유튜브를 통해 독학을 했지만 코딩이라는

\*\* Github 프로필을 꾸미는 것이 재미있어서 하다보니 시간이 지나버렸다..😂 오늘 드디어 멋쟁이사자처럼 프론트엔드 스쿨 2기의 첫수업을 수강하였다.오늘은 OT와 기초적인 HTML/CSS를 배울 수 있는 코드라이언의 일단 만드는 HTML/CSS를 수강했다.일단

그룹화가 가능한 태그들

section과 article은 자리가 바뀌어도 상관이 없다. 하지만 대부분 경우 section안에 article을 넣는다. 이 두 태그는 heading태그와 같이 사용하는 것을 권장 a

IP/Domain/URL의 기본 개념과 구조 🧬 IP란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. 쉽게 생각하면 인터넷 통신에서만 사용하는 전화번호이다. URL의 안에 포함되는 도메인(Domain)은 IP를 가지는

Living Standard 👍 HTML 태그 강의 중에 강사님께서 "HTML5는 잘못된 명칭이고 'HTML Living Standard'라고 부르는게 맞다."라고 하셨다. 왜 'HTML5'을 'HTML Living Standard'로 부르는게 맞을까? 이를 아려

Text-level Semantics 📄 텍스트 레벨 시멘틱란 무엇일까? 쉽게 생각한다면 콘텐츠의 출력을 주목적으로 하고 태그가 가지고 있는 콘텐츠만큼의 영역만을 차지하는 태그를 말한다. CSS가 나오기 전 태그를 통해 스타일을 넣는 방식(HTML4.X, XHT

Embedded Contents는 뭘까? Embedded는 내장하다라는 뜻이 있는 것으로 아는데 '콘텐츠를 내장하는 요소'라고 생각하면 될 것 같다. 가면 갈수록 모르는 명칭이 생겨 혼란스럽지만 자연스럽게 알게 되겠지라는 여유아닌 여유로 정리를 해보도록 하겠다!"웹 접

이미지 관련 태그에 이어 이번엔 미디어 관련 태그를 배워보자.미디어 태그는 대표적으로 <iframe> <video> <audio> 이렇게 3개가 있다. 간단하게 동영상을 재생하거나 음성 파일을 재생하는 태그라고 생각하면 될 것이다.<iframe>:

우리는 인터넷을 사용하면서 많은 로그인과 회원가입을 한다. 많은 포털 사이트 뿐만 아니라 온라인 쇼핑몰 등에서 말이다. 많은 로그인과 회원가입의 과정 중에 이제 우리가 배우는 form과 관련된 태그들이 있다. 하나씩 살펴보도록 하자!<form>은 기본적으로 정보를

오늘 git과 github를 본격적으로 강의을 들었다. 예상은 했지만 끊임없이 발생하는 에러와 처음 들어보는 생소한 용어들에 잠시 우주로 갔다온 기분을 느꼈다.. 😵‍💫어렵지만 개발자라면 이력서, 포트폴리오 떄문이라도 반드시 거쳐야하는 관문이다..무조건 친해져야한다

오늘의 강의는 특강으로 이루어졌다. 특강을 진행하는 강사님은 무려 유튜브채널 "빔캠프"의 이종찬 강사님! 빔캠프

github에 이번 과제였던 로그인 페이지를 커밋했다.시간은 생각보다 오래 걸렸던 것 같다.. 잔잔한 실수도 많고 깃허브에 올리는 것도 조금 서툴기도 하고..그래도 올린게 어디야..ㅎㅎㅎ링크를 달아놓아서 문제가 발생하면 업데이트 해야겠다.

오늘은 background-image에 대해 몰랐던 사실들을 한번 알아보도록 하자.CSS의 대가, 유튜브 채널 '빔캠프'의 이종찬 강사님의 강의를 듣고 정리해보았다.우선 HTML/CSS 소스코드는 이렇다.우선 위의 소스코드의 결과는 이렇다.결과를 보면 배경이미지로 적용

forms에 대해서 배워보자!

오늘은 <table>과 관련된 태그와 속성을 정리해보았다!

이번 게시물은 CSS의 정의와 CSS를 HTML의 요소에 적용시키는 법을 정리할 것이다.CSS는 Cascading Style Sheets의 약어이다. Cascade란 폭포란 뜻인데 이것에서 유추가 가능하다.CSS는 폭포수가 아래로 떨어질 때처럼 CSS에서 스타일이 적용

HTML 요소의 종류를 배워보자!

오늘은 기본적인 CSS 스타일 속성에 대한 강의를 들었다. width나 height과 같은 크기를 조절하는 속성이나 사각형을 원으로 만드는 border-radius와 테두리인 border 등을 다루는 법을 정리할 것이다.표준 CSS 박스모델에서 요소의 전체적인 크기는

설명하기 전 소스코드를 먼저 보자. 출력 결과를 보면 클래스명 .first와 .second의 width가 100px, height가 100px인 정사각형의 &lt;div>가 있다. .first에는 margin-bottom이 30px이 설정되어 있고 .second에는 m

처음 제목을 쓰고 "둘 다 안보이게 하는 속성이긴 한데.. overflow:hidden은 넘치는 부분을 가려주는 역할이 아닌가?" 라는 생각이 바로 들었다.포트폴리오를 급하게 만들던 나에겐 이 두 속성은 나에게 친숙한 속성이라 어느정도 이해하기는 쉬웠다.하지만 앞의 m

우리는 HTML로 마크업을 한 후 스타일을 주기 위해 CSS를 작성하는데 보통 단위(Units)을 정말 많이 사용한다. px라던지, 최근에야 자세하게 배웠던 em과 rem 등 😄그런데 우리가 자주 쓰는 단위보다 더 다양한 단위가 있다고 한다.개인적으로 수업을 들으면서

Google fonts구글 폰트는 가장 대표적인 웹 폰트 사이트입니다. 이곳에서는 라이선스에 대한 설명을 제공하며, 원하는 폰트 굵기 스타일을 선택하여 사용할 수 있습니다.Google Fonts눈누눈누는 상업용 무료 한글 폰트 사이트로, 상업적으로 사용할 수 있는 무료

Text는 레이아웃을 결정하는데 중요한 역할을 할 때가 많다. 대표적인 것으로 "가독성"을 책임지는 것이다. 그래서 이번엔 Text와 관련된 대표적인 속성들을 정리해보도록 하겠다. Text 용어 텍스트의 내부에는 명칭이 존재한다. 어센더(ascender) : 소문

오늘은 헷갈렸던 몇 가지 background 속성에 대해서 정리를 해볼 것이다.background 속성은 말그대로 "배경"을 이미지 파일을 이용해서 삽입하는 것을 말한다.대체적으로 이전 게시물에서 한번 정리를 해서 겹칠 수도 있지만 background 속성은 디자인적으

오늘은 position 속성에 대해서 정리를 해볼 것이다.개인적으로 가장 재미있었던 속성이다. 아무런 신경을 쓰지 않고 이동시키는게 편해서 그런 것 같다.😊position은 문서 상에서 요소를 배치하는 방법 중 하나이다.position을 이해하려면 flow에 대해서

오늘은 CSS에서 가장 많이 사용하고 있는 속성인 flex! TIL을 기록하지도 않던 나에게 flex 속성을 나 스스로 정리할 날이 올 줄이야..! 오늘 확실히 정리하고 이해해보도록 하겠다! 🔥 Flex란? 🤔 flex는 '유동적인'이라는 뜻의 flexible에

자, 다시 flex 정리 시간이다.이번에 다룰 flex 속성은 flex-basis, flex-shrink, flex-grow이다. 이번 속성들은 컨테이너 요소가 아닌 "자식 요소(flex-item)"에 적용하는 속성이다.이 부분은 flex를 사용할 때 웬만하면 건드리지

그동안 많은 과제들이 오고 가고 해서 여유시간이 없었는데 드디어 여유로운 시간이 있어서 오랜만에 정리를 한다. 하얗게 불태운다는 것이 이런 것일까..?🔥 아무튼 오늘은 "이미지 스프라이트 기법"에 대해서 살펴볼 것이다. 이미지 스프라이트 기법이란? 스프라이트(Sp

오늘은 웹접근성과 관련된 주제를 조금 다루어보려고 한다.웹접근성을 위한 IR기법이다.아마 IR기법에 대해서는 전 게시물에 한번 언급을 했었던 걸로 기억하고 있다. 하지만 단독으로 다루지 않았기 때문에 이번에 정리해보도록 하겠다.IR은 Image Replacement의

드디어 자바스크립트의 정리를 시작한다. 개인적으로 가장 기다렸던 강의이다.솔직히 말해서 나는 자바스크립트나 Jquery나 이해하면서 사용하는 것은 없고 그저 템플릿을 가져다 쓰는 정도의 실력만 가지고 있었기 때문에 더욱 기대가 되는 부분이다.오늘부터 자바스크립트의 정리

변수에는 다양한 데이터 타입이 존재한다. 오늘은 데이터 타입에 어떤 종류가 있는지 정리해보도록 하겠다. 원시 타입 VS 객체 타입 원시 타입(Primitive type)은 정수, 실수, 문자열, 논리(Boolean) 타입 등 실제 데이터 값을 저장하는 타입이다.

데이터 타입마다 사용가능한 메서드가 있는데 숫자 타입 먼저 정리해보겠다.아래의 변수를 가지고 메서드를 테스트 해보자.사용 언어에 따라 숫자의 형태를 바꿔주는 메서드이다. 기본형태는 위처럼 작성이 가능하다.매개변수는 선택적으로 사용이 가능하고 생략할 시 아래처럼 "웹 브

오늘은 문자열 타입에서 사용 가능한 메서드를 정리해보자!문자열 또한 기본적으로 한 자씩 0부터 인덱스를 가진다.위처럼 문자열로 된 변수에서 인덱스번호를 통해 한 자씩 접근할 수 있는 것을 알 수 있다.그렇다면 인덱스로 접근해서 문자열의 값을 바꿀 수 있지 않을까?하지만

오늘은 '불리언(Boolean)' 타입에 대해서 알아보도록 하자!Boolean은 '불린'이라고도 읽고 '불리언'이라고도 읽는다. 컴퓨터 사이언스에서는 '논리적인 데이터 유형'이라고 설명하고 있다.값으로는 true와 false만을 가지고 있으며 아래처럼 if문과 같은 조

원시형 타입(Primitive type)을 넘어서 드디어 Object 타입으로 왔다.Object 타입은 객체 타입으로 원시형 타입과 다르게 객체형은 다양한 데이터를 담을 수가 있다.객체는 아래의 코드처럼 key : value를 한쌍으로 가지는 속성을 뜻하는 proper

Array의 기본과 메서드를 알아보자.

오늘은 저번과 이어서 나머지 배열 메서드를 살펴보도록 하자. 이 게시물 또한 **원본 배열에 영향을 주는 것이면 🔄 로 표기할 것이다.**

오늘은 배열의 메서드 중 가장 핵심적으로 자주 사용하게 될 메서드 3개인 forEach, filter, map을 다룰 것이다.강사님께서도 가장 많이 사용하는 메서드니 다른 메서드는 검색해서 사용하더라도 이 메서드들은 꼭 알아두라고 당부하셨다.이 게시물도 마찬가지로 원본

지금은 자바스크립트의 마지막 알고리즘과 자료구조에 대해 배우고 있지만, 내가 이해가 안되는 부분이 많아서 가장 주춤했던 부분이 Prototype이 다가왔을 때 부터 인 것 같다. 그래서 시간이 있을 때 꼭 Prototype을 조금이라도 이해하도록 해보자라는 마인드로 오