IT 관련/개발(Codecademy) 41

CSS Transition 설정

Transition 두 상태(state)를 자연스럽게 이어지게 만들어주는 속성이다. 바로 property를 받아들이게 하지 않고 그 사이에 설정된 만큼의 딜레이를 주거나 해서 자연스럽게 이어지는 애니메이션을 부여하게 해준다. 기본 문법은 다음과 같다. transition transition-delay transition-duration transition-property transition-timing-function transition은 shorthand property로 위에 네가지 property를 한 줄로 표현할 수 있다. 그렇게 했을 때의 문법은 다음과 같다. transition : propertyname(색깔, 배경 등등) duration(지속시간 단위는 s) transition-timing-..

CSS typography / CSS 폰트 및 타이포그래피

Font-family font-family로 폰트를 바꿀 수 있다. 여러 어절로 된 폰트의 경우 인용구 " " , ' ' 를 활용하여 표기한다. Web safe font를 활용하여 여러 브라우저에서 활용되는 범용성있는 폰트를 사용할 수 있다. fall back 폰트라고 해서 만약 폰트를 이용자가 사용할 수 없는 종류의 폰트라면 , 첫 번째가 아닌 두번 째 세번째 기입된 폰트를 자동으로 사용하게 한다. 예시) font-family : Caslon, Georgia, 'Times New Roman'; 비슷한 종류의 폰트를 나열해 놓으면 된다. 위와 같은 일련의 폰트 무리를 font stack 이라고 한다. 브라우저에서는 Caslon을 먼저 시도해보고, 안되면 조지아 그것도 안되면 마지막인 Times new r..

CSS 심화 / FED 코드카데미 프론트엔드 디벨로퍼 코스 / title의 문제

Text-decoration 밑줄, 취소줄, 윗줄을 표시할 수 있는 Text decoration, 줄의 굵기 , 색깔 등을 바꿀 수 있다. dotted : 점선 , wavy ; 구불거리는 선 text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness text-decoration-thickness - CSS: Cascading Style Sheets | MDN The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as..

윈도우즈 환경에서의 Bash 사용 / Git bash 활용

CLI 라고 하는 것은 , 우리가 터미널 상에서 보이는 interface로 커맨드라인을 활용한 인터페이스이다. 리눅스 기반과 맥os에서는 Bash 라고 하는 것이 쓰이고 , 윈도우 상에서는 Command prompt가 사용되는데 Bash가 더 폭넓게 사용되기 때문에 (open source라서) 코드카데미에서는 Git bash를 윈도우에 깔아서 사용할 것을 추천했다. https://gitforwindows.org/ Git for Windows Git for Windows focuses on offering a lightweight, native set of tools that bring the full feature set of the Git SCM to Windows while providing appr..

코드카데미 프론트엔드 코스 : 커맨드 라인 Command line

HTML / CSS 를 간단하게 훑고 이어지는 내용은 깃허브에서 git page로 웹사이트를 deploy 하는 것이었다. 해당부분은 깃을 따로 파면서 공부를 하는게 좋을 것 같아서 따로 정리하지는 않았다. 이번에는 Navigation 섹션의 Command line이다. 우리가 흔히 윈도우에서는 cmd로 하는 것처럼, 텍스트 베이스로 디렉토리에 접근하는 것을 커맨드라인이라고 하는데 , 여기서는 맥북을 기준으로 서술한 것같다. ls ; 디렉토리의 구성 폴더와 파일을 나열한다. pwd; print working directory의 약자로 '지금 내가 속한' 폴더를 표시한다. cd ; change directory의 약자로 '내가 특정한 폴더로 변경' 하게 한다. 뒤에 ..을 붙이면(.. 이라는 argument..

CSS / Display and Positioning , Flow of HTML에 관해서 /

먼저 Block level element 와 Inline element에 대해서 모르고 있었는데, MDN을 통해 알게되었다. 간단하게 요약하면, Block level 요소들은 P와 같이 적용되면, 그 것이 속한 부모요소의 범위에 영향을 미치는 종류이고(배경색을 지정해보면 박스처럼 구분됨) 반대로 inline 요소들은 span처럼 지정된 요소자체에만 영향을 미치는(흔히 사용하는 하이라이트 기능처럼 해당 요소에만 영향을 줌) 요소이다. CSS는 HTML을 디자인적으로 조절해주는 역할도 있지만, 동시에 어떤 순서로 HTML을 배치하게(position) 할 것인지에 대해서도 지정해주는 역할도 한다. position display z-index float clear 다섯가지의 property를 이용해 진행된다. ..

CSS Visual Rules , BOX Model / 코드카데미 프론트엔드 코스 #6

이전에는 HTML, CSS의 기초에 대해 설명 이번에도 기초적인 내용이지만, Visual Rule 파트. 먼저 Font Family부터 Opacity Text align 등의 기본적인 font 관련 내용을 요약하고 그 다음에 Box model에 관한 설명 Font Family Web safe fonts 라는 것을 사용하는것이 권장되고, 그것이 없으면 브라우저나 os에 따라 표시가 되지 않는 폰트가 있을 수 있음. 우리가 흔히 말하는 폰트, ~체가 Font Family임 , 만약 폰트의 이름이 두 어절이라면 ""를 사용해 묶어서 표기해야함. 구문) font-family: Font weight bold 등 글자 굵기 지정 Text align left 좌측 정렬(parent element 기준으로함) cent..

Semantic HTML 에 대해서 / 코드카데미 프론트엔드 디벨로퍼 코스 #4

이전까지 HTML의 기초 그리고 Table에 대해서 다루었다. 이번에는 Semantic HTML이라고 하는 파트이다. Semantic HTML이란? Semantic 이란 "의미와 연관되는"이라는 뜻이라고 Codecademy에서 설명하는데 , 예를 들자면 단순히 div를 써서 코딩을 구분짓는 것보다는 header라고하는 보다 직관적인 요소를 사용해서 구분하면 우리가 볼 때 눈에 확 들어오고 , '아 이게 머릿말 부분이구나' 하는 식으로 이해할 수 있다는 것을 설명하는 것이 Semantic 이라는 용어 같다. + Codecademy 퀴즈를 풀다보니까 이해가 된 부분이 있다. Semantic한 태그를 쓸 경우 우리가 딱 보고서 어? 이거 미디어 삽입을 위한 태그구나, 아니면 어? 이부분은 페이지에서 가장 중요..

HTML에서의 Table 활용과, 왜 CSS를 활용하여 border를 만들어야 하는지에 대해, colspan 과 rowspan 그리고 tbody #3

TABLE 오늘은 HTML 의 Table 기능에 대해 공부했다. 기본적으로 Table은 우리가 보는 아래와 같은 표를 만드는 element이다. 행(가로) 열(세로) 이런식으로 구성되어 있고, 내부에는 row(세로축, 열) 와 column(가로축, 행)이 들어가게 된다. 로 table row(열)을 표현하고, 행의 경우에는 (table data의 약자) 태그를 활용하여 tr 안에 들어가는 데이터가 차례대로 행이 되게 된다. ex) Myfavorite Genre Bossa nova Hip hop 위와 같은 코드라면 아래와 같이 나올 것 이다. Myfavorite Genre Bossa nova Hip hop 티스토리의 HTML 편집기능을 활용하여 한번 표시해보도록 해보겠다. Myfavorite Genre B..

Mozilla Developer Network(MDN) 문서 중 HTML Debugging에 관한 내용. Permissive Code 란?

Debugging HTML - Learn web development | MDN (mozilla.org) Debugging HTML - Learn web development | MDN So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML modul developer.mozilla.org Codecademy 코스 중..