2023.06.27 - [WEB/CSS] - flex를 배워보자 - 1 flex를 배워보자 - 1 원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅 uiweb.tistory.com 이전글을 읽고 오시길 바랄게요 display: flex를 선언하면 부모요소가 flex-container가 되면서 자식들이 flex-item이 된다고 했는데요 각 flex-item들에게 각각의 속성을 지정할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 align-self 부모요소에게만 적용할 수 있는 정렬속성들이 각각의 플렉스 아이템에게도 적용이 가능한데요 align-self입..
원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅 해보려 합니다. 워낙 자세하게 나온 포스팅들이 많지만 시작해보겠어요 예전 학생과의 카톡..내용 float를 배우고 flex를 하고 나면 생각보다 너무 편리해서 학생들이 좋아하고 잘 사용하긴 했는데 중요한건 제대로 알고 써야 하니까~ flex는 display 속성 중 하나이고 flex와 inline-flex가 있어요 block과 inline-block개념이라 생각하시면 되고 잘 모르겠으면 일단 보고오... 2021.12.12 - [WEB/HTML] - inline요소와 block요소 inline요소와 block요소..
안녕하세요 찐망고입니다~ 이 포스팅은 며칠 만에 마무리가 될지 모르겠지만 일단 시작해보도록 하겠습니다. 지난번 포스팅에서 제가 박스 모델 관련 padding과 border에 관해서 설명하였는데요~ 2021.12.30 - [마크업/CSS] - box model (박스모델) - border와 padding box model (박스모델) - border와 padding 안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CSS로 지정해야 할지 잠시 고민했어요.ㅎ 일단 제 포스팅은 박스 모델에 관련하 uiweb.tistory.com 오늘은 박스 모델에서 콘텐츠를 기준으로 border 바깥쪽 여백인 margin에 관해 포스팅을 시작할 겁니다. ..
안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CSS로 지정해야 할지 잠시 고민했어요.ㅎ 일단 제 포스팅은 박스 모델에 관련하여 border나 padding이나 margin을 주는 css표기법을 써보려는 포스팅은 아니고요~ 전체적으로 박스 모델에서 저런 속성들을 사용했을 때 나타나는 특징? 그래서 조심해야 하는 부분을 중점적으로 포스팅하려고 합니다. 저번 포스팅에서 제가 HTML에서 사용하는 요소는 inline요소와 block요소로 나뉜다고 했었는데요 그 각 요소마다 특징이 있었죠?? 예를 들어 inline요소는 해당 텍스트 콘텐츠만큼 width값을 가진다거나 block요소는 컨텐츠 크기와 상관없이 브라우저 너비만큼 width를 ..
안녕하세요~드디어 3일차 글을 쓰게 된 찐망고입니다. 오늘은 웹에서 사용하기 편한 웹아이콘을 적용하는 방법에 대해서포스팅을 해보려고 합니다. 제가 예전에 자주 쓰던 사이트는 폰트어썸이고...https://fontawesome.com/ Font AwesomeThe world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.fontawesome.com 이번에 포스팅 할 사이트는 https://xpressengine.github.io/XEIcon/ XEIcon, 문자를 그리다XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이..
안녕하세요~ 작심삼일로 또 끝날것 같지만 매일매일 포스팅하기 이틀 차 찐망고입니다. 오늘은 어제에 이어서 HTML 문서에 글꼴을 적용하는 방법에 대해서 포스팅해보려고 합니다. 이전 글은 아래에서 확인합니다. 2021.07.21 - [마크업/CSS] - 안녕 구글 웹폰트? 아니 폰트에 대해서 안녕 구글웹폰트? 아니 폰트에 대해서 안녕하세요 여러분. 블로그 매일 포스팅한다고 그랬는데... 봐주는 사람은 없지만 굳이 제 의지로 css 카테고리에 두 번째 글을 써봅니다. 먼가 블로그의 컨셉을 잡아야 하는데 존대와 반말을 섞 uiweb.tistory.com 이전 글에선 구글 웹폰트를 이용해서 폰트를 적용하는 방법에 대해서 설명하였고, 오늘은 내 서버에 직접 폰트를 넣어보는? 그래서 적용해보는 작업을 해볼 예정입니..
안녕하세요 여러분. 블로그 매일 포스팅한다고 그랬는데... 봐주는 사람은 없지만 굳이 제 의지로 css 카테고리에 두 번째 글을 써봅니다. 먼가 블로그의 콘셉트를 잡아야 하는데 존대와 반말을 섞어쓰다보니 콘셉트 잡기도 쉽지 않네요.. 저번에 reset.css에 관련된 글을 하나 남겼습니다. 2021.06.30 - [마크업/CSS] - RESET.CSS RESET.CSS 마크업 퍼블리싱하면서 가장 중요한 부분 중 하나는 크로스 브라우징인데.. 각 브라우저마다 html요소가 보이는 부분이 조금씩 다르다 보니...(안녕 ie? 니 얘기야 ios너도... 인마) html의 각 요소를 uiweb.tistory.com 딱히 질문이나 댓글이 없어서 지나감;; 오늘은 HTML문서에서 아주 중요한 역할을 가진 FONT에..
마크업 퍼블리싱하면서 가장 중요한 부분 중 하나는 크로스 브라우징인데.. 각 브라우저마다 html요소가 보이는 부분이 조금씩 다르다 보니...(안녕 ie? 니 얘기야 ios너도... 인마) html의 각 요소를 초기화시키는 작업을 해야 한다. 그게 바로 reset의 시작.. reset의 기원을 검색해보면 여러 가지의 참고 reset을 확인해 볼 수 있는데 그중 세가지만 살펴보자면.. Eric Meyer’s “Reset CSS” 2.0 CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margin..
- Total
- Today
- Yesterday
- Border
- 웹디자인
- uidesign
- uxdesign
- 포토샵합성
- JavaScriptTips
- 반응형웹
- css
- 피그마플러그인
- Slick
- margin
- JavaScript
- css4
- 스마트폰해상도
- css그리드
- padding
- 디자인팁
- boxmodel
- 웹표준
- uiux
- CSS3
- 슬라이드플러그인
- 자바스크립트숫자카운트
- 크로스브라우징
- 웹접근성
- 시멘틱마크업
- 코딩교육
- UI디자인
- slickAPI
- 프로그래밍기초
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |