![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/SsBiZ/btrrqnJhpxd/PzgAUk2cToo4liSnfimQUk/img.png)
안녕하세요 찐망고 입니다. 오늘은 자바스크립트에 변수에 대해서 설명해 보도록 하겠습니다. 변수는 제가 두 가지 방법으로 설명을 하는데요. 한 가지 물건을 넣을 수 있는 선물상자라고 이야기합니다. 다른 물건을 넣으면 원래 있던 물건이 없어지든 빼버리든지 다른 상자를 준비하든지 해야 하는 거죠 변수는 variable, 즉 변하는 값을 이야기하는데요. 변수에 값을 주는 것을 가리켜 할당(assignment)이라고 합니다. "기분"이라는 변수에 "행복"이라는 값을 "할당한다"라고 말하거나 "나이"라는 변수에 "40살"이라는 값을 할당한다고 합니다. 아래는 자바스크립트에서 변수에 값을 할당하는 방법입니다. mood = "행복"; age = 40; =으로 값을 변수에 대입한다고 하는데 수학에서 말하는 같다(equa..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/GnCoJ/btraGbSYfnv/GnoqVklQkw42zHOYDTHruk/img.png)
안녕하세요 찐망고입니다. 오늘은 웹 접근성 관련 포스팅을 해보려고 합니다. 이전 글도 확인하고 올게요~ 2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해 2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업?? 웹 접근성에 대해 잘 정의되어있는 사이트의 링크를 걸어볼게요 https://www.w3.org/WAI/fundamentals/accessibility-intro/ko#what 월드 와이드 웹을 창시한 팀 버너스 리는 웹을 “웹의 힘은 보편성에 있으며, 장애에 구애 없이 누구나 손쉽게 접근할 수 있는 공간”으로 정의했다. 또한, W3C에서 만든 웹 접근성 이니셔티브(WAI : Web Accessibility Initiative)에 따르면..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/njH9e/btrrwfXHKbj/BAobMWvh97S5o5SkaVwiI1/img.gif)
안녕하세요 찐망고입니다. 임시 저장된 포스팅이 또 하나 추가될 예정입니다만.. 이렇게 또 두서없이 스크립트 포스팅을 시작하도록 하겠습니다. ㅎㅎ 자바스크립트 첫 포스팅은 스크립트의 역사부터 시작하려고 했는데 검색해보니 정리가 잘된 블로그들이 많더라고요.. 그래서 일단 링크로 정리.. https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript Roseline 개발 블로그 Javascript, Flutter를 좋아하는 프론트엔드 개발블로그 roseline.oopy.io 추가로 더 써보자면 자바스크립트는 넷스케이프가 썬 마이크로시스템즈(자바 만든 회사)와 함께 만들었는데, 자바스크립트는 웹 브라우저에 나중에 추가된 기능입니다...
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/NrM4V/btrsUEhDXHH/QRZFpzhVKMj4hjG7AtTYzK/img.png)
안녕하세요 찐망고입니다~ 이 포스팅은 며칠 만에 마무리가 될지 모르겠지만 일단 시작해보도록 하겠습니다. 지난번 포스팅에서 제가 박스 모델 관련 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를 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cIb1Ge/btrnJCa4aJj/Vh0peb4xNfapBxxHNrG8T0/img.png)
오랜만에 포스팅하는 찐망고입니다. 일주일에 한두 번이라도 포스팅하는 게 나름 계획이긴 했는데 쉽지 않네요.. 그저 출퇴근만 할 뿐인데 바빠요.... 더보기 더보기 실은 안 바빠요 그저 게으를 뿐 요즘 MBTI과 몰입 중인데 저는 정말 찐 P인 듯.. ^^; 웹 관련 포스팅이니까 본론으로 돌아와서~ 웹 표준 코딩은 HTML요소의 각 뜻에 따라 뼈대를 짜는 게 가장 큰 목적입니다. 제목 요소에는 h요소를 문단에는 p요소를.. 시멘틱 마크업에 맞춰 시멘틱 요소를 사용하는 것이죠~ 각각의 요소에 대한 설명은 워낙 잘 나와 있는 곳들이 많아 패스하고 저는 바로 박스 모델이라는 부분에 대해 설명하려고 했지만, 일단 그러려면 요소의 기본 특징을 알아야 합니다. HTML에서 사용하는 요소들은 inline요소와 bloc..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Xn9uW/btrao7pWBgG/44G7yxCTnyxIKGY09yLIN1/img.png)
안녕하세요.. 날씨만큼 익어가는 찐망고입니다. 웹 표준, 크로스 브라우징, 시멘틱 마크업... 이젠 끝날 줄 알았는데 Outline이라니 😅 오늘은 시멘틱 요소들을 가지고 본격적으로 틀을 잡는 코드를 보여드릴까 해요.. 참고로 오늘의 찐망고의 코드고요. 내일의 찐망고는 다르게 마크업 할 수 있다는 걸 명심! 또 명심해주시길... A일수도 있고, B일 수도 있는데.. A와 B가 서로 본인 게 맞다고 싸우면 안 된다는 소리예요.. 일단 이전 글 두 개를 첨부하고 시작하겠습니다. 2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해 2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업?? 시멘틱 마크업이라는 게 의미가 잘 전달되게 마크업을 하자는 거잖..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bQpE1Q/btraoB5cFhS/akVsSxrK3zbUTAmcKQ9vY1/img.png)
안녕하세요!찐망고입니다.오늘은 HTML카테고리에 두 번째 쓰는 글이 되겠네요..원래 웹 표준에 대해 설명하고, 웹 접근성으로 넘어가려고 했는데이전 글에 말이 많아져서, 시멘틱 마크업을 포스팅 못하는 바람에.... 2021.07.25 - [마크업/HTML] - 웹 표준, 크로스 브라우징, 시멘틱 마크업에 대한 이해 웹표준,크로스브라우징, 시멘틱마크업에 대한 이해안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서uiweb.tistory.com 각설하고 시작해 보도록 하겠습니다. 시맨틱(Semantic)이란 "의미론적인"의 뜻이며, 마크업(Mar..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/NIiWb/btraoO3Hrmm/zzgn1Nlr7tvM7vrInZNIA0/img.png)
안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서.. 기본적인 것에 대해 접근을 해보도록 하겠습니다. 그중 첫 번째는 웹 표준 그러니까 크로스 브라우징에 관련된 포스팅입니다. 일단 웹 표준을 말하기 전에 브라우저에 대해 이야길 해봐야 하는데요. 제가 수업시간에 자주 접속하는 사이트가 하나 있어요 https://gs.statcounter.com/ StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Sear..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/brVpn7/btramgTo0Vd/czLInl29uJ4yIHFtBtKdDk/img.png)
안녕하세요~드디어 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은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이..
- Total
- Today
- Yesterday
- css그리드
- uiux
- JavaScript
- JavaScriptTips
- padding
- css
- slickAPI
- 자바스크립트숫자카운트
- margin
- 포토샵합성
- 웹접근성
- 코딩교육
- Border
- Slick
- 피그마플러그인
- 웹표준
- CSS3
- uidesign
- css4
- 웹디자인
- UI디자인
- 시멘틱마크업
- 슬라이드플러그인
- 프로그래밍기초
- 반응형웹
- 스마트폰해상도
- 크로스브라우징
- boxmodel
- 디자인팁
- uxdesign
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |