kasumil의 코딩 공작소

미디어 쿼리(Media Query) media query란 Responsive Web 을 구현하는 CSS technique.(한마디로 능동형 웹을 구현하기 위한 css 기술) @media only screen and (max-width: 480px) { body { font-size: 12px; } } @media — 이 키워드는 media 쿼리를 시작하겠다는 의미입니다. only screen — 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다. and (max-width : 480px) — 이건 media feature라고 불..

li, ul, ol padding-bottom 대신 margin-bottom을 사용하여도 똑같은 결과가 나옵니다. li는 테두리를 갖고 있지 않으니, 여백이 padding 쪽인지, margin 쪽인지 알기 어렵습니다. 그냥 리스트 아이템 아래에 여백만 추가하면 됩니다. 앞으로 둘 중에 어떤 property를 쓰셔도 상관이 없습니다. Table , , , , , 등이 있습니다. 한 행을 시작할 때는 로 시작합니다. tr은 table row의 줄임말입니다. 각각의 셀은 태그 내에 태그를 사용합니다. td는 table data의 줄임말입니다. 대신 태그를 사용했습니다. table heading의 줄임말입니다. 나 태그에 colspan, rowspan이라는 attribute를 추가해서 병합을 구현할 수 있습니다..

float 기반 레이아웃 float 속성에는 left, right, none의 값을 가지며 이중 하나를 값으로 줄 수 있다. but, float 속성을 가진 요소는 부모가 높이를 인지 할 수 없기에 부모인자를 무시하고 벗어나는 경우가 있다. 그렇기에 float를 다루기 어렵거나 귀찮은 요소라고 생각하는 개발자가 많이 있다고 한다. 그렇다면 이런 망아지같이 말을 안듣는 float 속성을 제어하려면 어떻게 해야할까? 그래서 clear라는 속성을 통해 제어해야한다. 이때 나타난 속성은 또 무엇인가? float의 동작방식을 제어하는데 중요한 요소. 부모속성을 무시하고 넘치는 부분을 해결하기 위해선 해결방법이 3가지 있다. 해결방법1. 바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을..

inline 속성값을 가진 태그로 a, span 태그 등이 있다. 인터넷주소링크, 요소(엘리먼트) block 속성값을 가진 태그로 div, p, h1 등이 있다. 정해진 것 없음 내용 제목 코드의 차이점은 html에서 표시될때 영역할당에 따른 구분이다. block은 한 줄을 차지하고, 그 옆에 아무런 속성, 요소등이 올 수가 없지만, inline 속성은 딱 감싸진 글자들만 표시되기때문이다. inline-block 블록 자체의 성질은 block이지만, inline-의 문구가 붙으므로 inline의 성질이 생겨서 block속성을 동시에 가진 것. 이해하기 쉽도록 한번 예제를 만들어 보았다. 맨 마지막은 inline-block을 블록성질이 inline으로 바뀐것을 볼 수 있도록 확인하기 위해서 작성하였다. d..

Position 속성 relative absolute fixed static(앞서 코딩학습 2일차에서 잘 안쓴다는 속성이 static이다.) static static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다. 그대로 설명을 가지고 왔다. 이보다 좋은 설명은 없는 것 같기때문이다. 말 그대로 static 속성은 지정되지 아니다. 그렇기에 다른 지정된 속성을 쓰기위해서 지정된 속성인 relative, absolute, fixed를 사용한다. + Position 속성을 부여하지 ..

코딩학습 TIL 작성 1일차 - HTML - 이 선언문은 html 브라우저에서 HTML5를 사용하는 것을 알려주는 의미로 여태껏 유투브에서 그냥 이 문서가 HTML이다라고 단순히 사용되는 것으로 아는 줄 알았는데, 그런게 아니었다. 이 문서가 정확히는 HTML5로 버전맞춰 읽어라 라는 컴퓨터가 인식할 수 있게 도와주는 문구였다. 태그나 클래스 선택자, ID선택자들은 유튜브에서 알려주었으나 속성(attribute), 요소(Element) 등은 안 알려주었는데, 기본적인 것들을 알 수 있게 되었다. 흔히 , 등 태그 뒤에 오는 것들이 src, href, alt 등이 속성을 의미한다. 요소로 요소라고 적힌 부분이 요소를 의미한다. 기초부분은 의외로 너무나도 기초라 다들 대충하나 이를 지칭하는 것을 모른다면, ..

commit - 게임으로 비유하면 저장 버전. ex) 프롤로그, 2장 왕의 귀환, 3장 석시딩유 add - 추가하기 사용예시 git add "파일" git commit -m(message) "버전에 대한 설명" branch - 가지치기로 분점을 내서 다른 1-1, 1-2버전으로 저장하는 방식 버전을 달리하여 적용할때 사용한다. ex) git checkout -b(branch) james 제임스계정 생성 가지치기 명령어 git checkout master(기본이름 master) 마스터 계정으로 돌아간다. git branch -d(delete) james 제임스 계정 삭제하기 Push 발행하기. 업로드 명령어. Pull 갱신하기. git pull 하면 자동으로 원격저장소에 있는 파일로 로컬저장소 파일이 갱신..

파이썬에서 가변객체와 불변객체는 무엇이며, 어떠한 자료형이 있는지 공부한다. 가변 - 말 그대로 가변(加變) 변경 가능한 객체 list, set, dict 불변 - 불변 그대로 불변(不變) 변경이 불가능한 객체 int, float, bool, str, tuple BTS혹은 레드벨벳의 멤버정보를 딕셔너리로 구현해주세요. >>> Redvelvet = {'아이린' : '30세', '슬기' : '27세', '웬디' : '27세', '조이' : '24세', '예리' : '22세'} >>> print(Redvelvet) {'아이린': '30세', '슬기': '27세', '웬디': '27세', '조이': '24세', '예리': '22세'} 스트링, 리스트, 딕셔너리를 반복문으로 돌면서 인자를 출력하는 함수를 작성해보..

이미지 태그 source의 약자로 이미지 태그에 들어감. 이미지 태그의 부가 설명태그로 이미지 창이 뜨지 못했을때 사진을 설명하는 태그. width 가로크기 height 세로크기 anchor 닻이라는 의미. 링크를 뜻한다. 링크 하이퍼레퍼런스로 링크주소를 적을때 사용 클래스 태그 id태그 # id태그 선택자 . 클래스 선택자 ** { color: rgb(0.0.0)} 컬러 선택 ** { background-color: rgb(0.0.0)} 백그라운드 컬러 선택 사이에 있는 용어는 모두 css 언어로 이해해야한다. 속성 html 용어로 css처럼 인식해야한다는 것을 알려주는 언어 사이에 작동. 태그 글씨 그대로 글자의 크기를 설정하는 태그로 font-size로 조정이 가능 text-align(문자를 가지런..

HTML 개념. 꼭 써야한다. 우리 눈에 보이지 않는 메타데이터로 폰트, 타이틀 등을 설정하는데 사용. 본문 내용 .... 본문 내 부제목 .... 문단의 약자로 본문내용 띄어쓰기 이탤릭(기울임꼴) 굵은 글꼴. unordered list의 약자. 순서 없이 표시할때 사용 ordered lits의 약자. 순번을 달아야할 때 사용. list의 약자 ul, ol에 따라가는 순번을 달때 사용하는 태그.