찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다. 오늘은 HTML에디터 관련 포스팅을 해보려고 하는데요~ 일단 에디터를 사용하게 되면 코드를 좀더 깔끔하고 직관적으로 볼 수 있고, 자동완성기능이 있어 코딩하는데 있어 작업이 수월한 장점이 있습니다. 텍스트 에디터, 웹 에디터, 통합개발환경(IDE), 웹기반코드 에디터 로 나눌 수 있겠네요 워낙 많은 에디터들이 있고, 각자 장단점이 있는데 그걸 포스팅하기엔 좀 무리가 있고.. 그나마 제가 사용해봤던 에디터 위주로 포스팅을 해볼게요 1. 서브라임텍스트 서브 라임 텍스트는 파이썬 API 용으로 작성된 사유 크로스 플랫폼 소스 코드 편집기입니다. 수많은 프로그래밍 언어와 마크업 언어를 네이티브로 지원하며, 플러그인을 사용하여 사용자에 의해 기능을 확장할 수 있습니다. 서브라임 텍스트는 ..

안녕하세요 찐망고입니다.오늘은 자바스크립트의 연산자에 대해서 포스팅하도록 하겠습니다. 산술 연산자자바스크립트의 산술 연산자에는 표준 산술 연산자(덧셈, 뺄셈, 곱셈, 나눗셈)가 있습니다.수학에서 배웠던 것처럼 숫자형 값을 계산할 수 있습니다.20 + 10; // 3020 - 10; // 1020 * 10; // 20020 / 10; // 2 덧셈(+) 연산자인 경우에만 문자형에도 사용 가능 하며, 이때는 두개이상의 문자열을 이어 붙일 수 있습니다.예를 들어,let subject = 'javascript';let score = 100;console.log(subject + '과목 성적은 ' + score + '점 입니다.');// javascript 과목 성적은 100점 입니다. 연산자 우선순위에 따라 산..

안녕하세요 찐망고입니다. 수업을 하다 보니 바닐라 JS를 언급하는 친구들이 늘었더라구요 jQuery와 바닐라 JS에 관련하여 포스팅을 해보려 합니다. 자바스크립트는 프론트 사이드에서 꽤나 많이 언급되어 사용되는 언어이자 서버사이드 개발이 가능한 언어랍니다. 물론 프론트 영역에서의 사용이 절대적이기 때문에 자바스크립트를 기반으로 한 프레임워크들이 현재 대세로 자리 잡고 있어요. 페이스북 엔지니어가 제작한 React, 구글 엔지니어가 제작한 Vue, 대규모 애플리케이션에 적합한 Angular 등이 이에 해당합니다. 또 프레임워크라고 하기에는 아주 조금 애매한 감이 있지만 현업 웹 개발에서 많이 사용하는 jQuery도 결국 자바스크립트의 라이브러리 중 하나입니다. jQuery란? 제이쿼리(jQuery)는 오픈..

안녕하세요 찐망고입니다. 오늘은 웹 접근성 관련 포스팅을 해보려고 합니다. 이전 글도 확인하고 올게요~ 2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해 2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업?? 웹 접근성에 대해 잘 정의되어있는 사이트의 링크를 걸어볼게요 https://www.w3.org/WAI/fundamentals/accessibility-intro/ko#what 월드 와이드 웹을 창시한 팀 버너스 리는 웹을 “웹의 힘은 보편성에 있으며, 장애에 구애 없이 누구나 손쉽게 접근할 수 있는 공간”으로 정의했다. 또한, W3C에서 만든 웹 접근성 이니셔티브(WAI : Web Accessibility Initiative)에 따르면..

안녕하세요 찐망고입니다~ 이 포스팅은 며칠 만에 마무리가 될지 모르겠지만 일단 시작해보도록 하겠습니다. 지난번 포스팅에서 제가 박스 모델 관련 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를 가진다거나..

오랜만에 포스팅하는 찐망고입니다. 일주일에 한두 번이라도 포스팅하는 게 나름 계획이긴 했는데 쉽지 않네요.. 그저 출퇴근만 할 뿐인데 바빠요.... 더보기 더보기 실은 안 바빠요 그저 게으를 뿐 요즘 MBTI과 몰입 중인데 저는 정말 찐 P인 듯.. ^^; 웹 관련 포스팅이니까 본론으로 돌아와서~ 웹 표준 코딩은 HTML요소의 각 뜻에 따라 뼈대를 짜는 게 가장 큰 목적입니다. 제목 요소에는 h요소를 문단에는 p요소를.. 시멘틱 마크업에 맞춰 시멘틱 요소를 사용하는 것이죠~ 각각의 요소에 대한 설명은 워낙 잘 나와 있는 곳들이 많아 패스하고 저는 바로 박스 모델이라는 부분에 대해 설명하려고 했지만, 일단 그러려면 요소의 기본 특징을 알아야 합니다. HTML에서 사용하는 요소들은 inline요소와 bloc..

안녕하세요.. 날씨만큼 익어가는 찐망고입니다. 웹 표준, 크로스 브라우징, 시멘틱 마크업... 이젠 끝날 줄 알았는데 Outline이라니 😅 오늘은 시멘틱 요소들을 가지고 본격적으로 틀을 잡는 코드를 보여드릴까 해요.. 참고로 오늘의 찐망고의 코드고요. 내일의 찐망고는 다르게 마크업 할 수 있다는 걸 명심! 또 명심해주시길... A일수도 있고, B일 수도 있는데.. A와 B가 서로 본인 게 맞다고 싸우면 안 된다는 소리예요.. 일단 이전 글 두 개를 첨부하고 시작하겠습니다. 2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해 2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업?? 시멘틱 마크업이라는 게 의미가 잘 전달되게 마크업을 하자는 거잖..

안녕하세요!찐망고입니다.오늘은 HTML카테고리에 두 번째 쓰는 글이 되겠네요..원래 웹 표준에 대해 설명하고, 웹 접근성으로 넘어가려고 했는데이전 글에 말이 많아져서, 시멘틱 마크업을 포스팅 못하는 바람에.... 2021.07.25 - [마크업/HTML] - 웹 표준, 크로스 브라우징, 시멘틱 마크업에 대한 이해 웹표준,크로스브라우징, 시멘틱마크업에 대한 이해안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서uiweb.tistory.com   각설하고 시작해 보도록 하겠습니다.  시맨틱(Semantic)이란 "의미론적인"의 뜻이며, 마크업(Mar..

안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서.. 기본적인 것에 대해 접근을 해보도록 하겠습니다. 그중 첫 번째는 웹 표준 그러니까 크로스 브라우징에 관련된 포스팅입니다. 일단 웹 표준을 말하기 전에 브라우저에 대해 이야길 해봐야 하는데요. 제가 수업시간에 자주 접속하는 사이트가 하나 있어요 https://gs.statcounter.com/ StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Sear..