'coding' 카테고리의 글 목록 (29 Page)

[개발자 도구] 브라우저 크기 확인하기

안녕하세요. 플입니다. 오늘은 브라우저 크기를 확인해볼 거예요. 1. F12 브라우저를 킨 상태에서 F12키를 눌러주세요. 아니면 마우스 오른쪽 클릭을 해서 가장 마지막 메뉴 검사를 선택해주세요. 그러면 이런 개발자 도구 창이 뜨는데요. 오늘은 이 창을 자세히 볼 필요는 없습니다. 그냥 켜져 있구나 하고 옆으로 쓱 밀어두세요. 2. 창 크기 조절 브라우저의 오른쪽 끝을 잡고 움직여보면 브라우저 사이즈가 변동되는 걸 볼 수 있으실 거예요. 사이즈를 줄였다 늘려보시면 오른쪽 상단에 숫자가 뜨는 게 보이실 거예요. 지금 1211px x 727px이라고 쓰여있죠? 가로가 1211px이고 세로가 727px이라는 뜻입니다. 이렇게 내가 보는 화면의 사이즈를 확인해 볼 수 있어요. 이게 원래는 안 뜨는데 개발자 도구..

coding/개발 팁 · 2020. 10. 8. 07:30

[html] <!DOCTYPE html> 대충 이해해보기

안녕하세요. 플입니다. 대충 이해해보기 시리즈 2탄입니다. (시리즈 해볼까 봐요) https://ssimplay.tistory.com/370 [html] html을 대충 이해해보자 안녕하세요. 플입니다. 오늘은 html에 대해서 이해해보도록 해요 1. html html은 "Hyper Text Mark-up Language"의 약자입니다. 하지만 이렇게 말하면 너무 어렵고 무슨 소리인지 모르겠죠. html은 웹페이지�� ssimplay.tistory.com 1탄 링크도 첨부해두겠습니다. 1. 선언하기 html 문서를 보시면 가장 위에 이라는 문구를 보신 적 있으실 거예요. 뭐야 그런 거 모르겠어하시는 분들을 위해서 익숙하실 티스토리 편집 모드 화면을 캡처해봤습니다. 가장 위에 보이시나요? 원래는 대문자로 ..

coding/html + css · 2020. 10. 3. 07:30

[html] html을 대충 이해해보자

안녕하세요. 플입니다. 오늘은 html에 대해서 이해해보도록 해요 1. html html은 "Hyper Text Mark-up Language"의 약자입니다. 하지만 이렇게 말하면 너무 어렵고 무슨 소리인지 모르겠죠. html은 웹페이지를 만들 때 쓰는 언어예요. 웹페이지의 뼈대를 만드는 언어죠. 티스토리를 하다 보면 종종 만날 기회가 있죠. 완벽한 비유는 아니지만 그림으로 표현하자면 이런 느낌이랄까요. html은 스케치 css는 색칠이라고 생각하면 좀 더 이해하기 쉬우실 거예요. 약속한 구조를 지키는 규칙이 있기도 한데 이거는 우선은 넘어가도록 해요. 2. 열기 닫기 아무말 html에는 열기랑 닫기가 있어요. 위의 코드를 보면 아시겠나요? 가 여는 부분이고 가 닫는 부분이에요. 조금 더 자세히 볼까요?..

coding/html + css · 2020. 9. 29. 07:30

[codepen] 코드펜을 티스토리에 불러와보자

안녕하세요. 플입니다. 오늘은 코드펜을 이용해 코드를 불러와볼 거예요. 1. 코드펜 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 우선 코드펜 사이트에 접속해줍니다. 그리고 로그인을 해주세요. 2. 코드 작성 오른쪽 메뉴 맨 위를 보시면 Pen이라는 메뉴가 있는데요. 이 메뉴를 클릭해주세요. 그러면 이렇게 간단하게 코드를 짤 수 있는 공간이 나와요. 아무거나 짜 볼게요. 코드는 제가 아무..

coding/editor · 2020. 9. 27. 07:30

[css] css 속성 강제 적용하기 (우선 적용)

안녕하세요. 플입니다. 오늘은 css를 강제로 적용해볼게요. 코드를 바로 확인하실 분은 3번으로 넘어가 주세요! 1. 기존 css 확인 오늘은 예시로 전에 만들었던 홈페이지를 가져와볼게요. 다시 보니 뜯어고치고 싶어 지네요. 좀 덜 바빠지면 대대적으로 리뉴얼을 해야겠습니다. 먼저 화살표로 표시한 부분을 봐주세요. 연한 노란색이죠? 오늘은 이 노란색 배경색을 바꿔보는 것으로 해보겠습니다. 기존의 코드는 표시된 부분이고요 반씩 나눠져 있기 때문에 linear-gradient로 되어있지만 그냥 .sto{ background:#fff5bf; } 라고 생각하고 진행할게요. 색을 반 나누는 방법이 궁금하시다면 아래 링크를 확인해주세요~ https://ssimplay.tistory.com/243 [css] linea..

coding/html + css · 2020. 9. 17. 07:30

coding 264