본문 바로가기

전체 글159

NUMPY 시작 수업시간에 numpy에 대해 배우기 시작했는데 자꾸 함수를 잊는것 같아 블로그에 업로드 하려 한다. 이 카테고리에 업로드 하는 글은 numpy 라이브러리의 함수를 주로 쓸 예정이다. 먼저 numpy는 배열간의 연산을 빠르게 하기 위한 라이브러리이다. 따라서 파이썬의 단점인 속도를 보완할 수 있고, 많은 데이터를 한번에 처리하기 때문에 크기면에서도 효율적이다. 2022. 10. 12.
이미지와 그라데이션 효과로 배경 꾸미기 이번 단원에서는 배경 이미지와 그라데이션 효과를 줄 수 있는 속성에 대해 배웠다. 배경 이미지는 웹을 만들 때 많이 사용되는 요소이고 눈에 가장 먼저 띄는 요소이기 때문에 집중해서 공부했다. 그런데 background - clip 속성과 background - origin 속성의 차이점을 모르겠다. 책에서는 배경 이미지의 적용 범위를 나타내는 속성이라고 나와있는데 둘 다 옵션도 같은것 같아 어떤 상황에서 어떤 속성을 써야하는지 다시 찾아봐야겠다. + 수정 ) clip은 배경색의 범위를 지정하는 속성이고 origin은 이미지를 지정하는 속성 배경색을 지정하는 속성 - background-color : 요소의 배경 색을 지정하는 속성. rgb값이나 16진수 또는 색상이름을 사용해서 지정 배경색의 적용범위를 .. 2022. 10. 2.
T story 블로그 클론 코딩 최근 css를 공부하며 나도 내 웹 사이트를 만들면 어떨까 하는 생각이 들었다. 아직 JS 와 css 를 완전히 마친게 아니라서 너무 섣부른가 하는 생각도 있었지만 욕심이 생겨 인터넷 검색과 책을 통해 내 블로그를 만들어 보았다. 이 웹사이트를 만들어보면서 생각보다 웹을 만든다는게 쉽지만은 않은 일이라는 것을 알게 되었고, 실력이 전보다 훨씬 늘었다는게 스스로 체감이 될 정도로 정말 도움이 많이 되었다. 웹사이트 링크 : https://jaehwi.netlify.app/ 미리보기 html 코드 Dvelopment blop 홈 태그 방명록 전체 글 94 레이아웃을 구성하는 css... 배치 방법을 결정하는 속성 - display: 블록레벨요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있게 함. 네비 속.. 2022. 10. 1.
레이아웃을 구성하는 css 박스모델 (2) 배치 방법을 결정하는 속성 - display : 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있게 함. 네비 속성에서 메뉴 항목을 가로로 배치하거나 이미지를 표 형태로 배치할 수 있게 함 종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 만든다 inline 블록 레벨 요소를 인라인 레벨 요소로 만든다 inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다, none 해당 요소를 표시하지 않음 좌우 배치를 결정하는 속성 - float : 특정 요소를 왼쪽이나 오른쪽에 고정하는 속성. 이 때 요소를 배치한 후 다른 요소와 적당한 간격을 유지하고 싶다면 margin속성을 이용해 조절할 수 있다. - clear : float.. 2022. 9. 11.
레이아웃을 구성하는 css 박스모델 (1) 처음에는 웹을 만들 때 웹을 큰 하나의 화면으로 보고 모든 요소를 그 위치에 맞게 조절해야 하는 줄 알았는데 사이드바, 본문 푸터등 큰 틀을 먼저 잡아서 하나의 큰 화면을 만든다는 것을 알았다, 이 전에도 헤더 푸터와 같은 내용을 배웠지만 그걸 구현하는 방법을 몰랐었는데 다시 한 번 짚고 넘어가니 쉽게 이해할 수 있었다. 또한, 패딩과 마진같은 테두리 안에 있는 용어에 대해서도 다시한번 생각해 볼 수 있었다. 박스모델 - 블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 (가로로 100%) - 인라인 레벨 요소: 태그의 콘텐츠만큼만 영역을 차지하며 다른 요소가 올 수 있음 (가로로 해당 크기만큼) 박스 모델의 기본 구성 - 콘텐츠 영역 (content) - 패딩 (paddi.. 2022. 9. 9.
텍스트를 표현하는 다양한 스타일 (2) 이번 단원에서는 목록과 표의 스타일에 대해 배웠다. 목록은 쉽게 공부할 수 있었지만 표를 공부하는데는 조금 시간이 걸렸다. 내가 테이블에 대해 어렵게 생각한 탓인지 기초 지식이 부족해서 그런것 같아 이전에 표를 생성하는 html을 한번 보고 공부하니 조금 쉽게 이해를 할 수 있었다. 1. 목록 스타일 (list - style) 목록 스타일은 list - style - type 속성을 이용하여 정할 수 있다. 이 떄 스타일의 속성값의 종류는 아래와 같다. 종류 설명 예시 disc 채운 원 모양 ● circle 빈 원 모양 ○ square 채운 사각형 모양 ■ decimal 1부터 시작하는 10진수 1,2,3,... decimal - leading - zero 0으로 시작하는 10진수 01,02,03, .... 2022. 9. 1.
텍스트를 표현하는 다양한 스타일 (1) 이번 단원에서는 텍스트의 시각적 효과에 대해 다룬다. 따라서 글씨의 크기, 색, 글씨체 그리고 왼쪽, 오른쪽 정렬과 같은 내용이 주를 이룬다. 지금 내가 쓰고있는 이 글에서도 글씨의 색을 바꾸거나 필기체를 바꾼다거나 하는 옵션이 있는데 그런 버튼을 클릭하게 되면 css 상에서 변하도록 설정해 놓은 것 같아서 신기했다. 텍스트의 효과를 바꾸는 속성 font-family (글꼴 지정) : 주로 태그와 같은 텍스트를 사용하는 요소에서 사용된다. 기본형은 font-family : | [,] 으로 사용 → 글꼴을 2개 이상 지정할 때에는 사이에 쉼표를 넣어 사용 → 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 글자가 깨질 수 있음 font-size (글씨 크기 지정) : 글자 크기의 단위는 px이나 pt로.. 2022. 8. 23.
웹 문서에 디자인 입히기 저번 단원에서 html을 마치고 css를 처음 시작했다. css는 웹의 보이는 모습을 만들고 움직이는 형태까지 만들 수 있다길래 어렵지 않을까 생각했었는데 생각보다 쉬웠고 재미있었다. 아 그리고 하나 궁금증이 생겼는데 ID선택자는 문서에서 한 번만 적용할 수 있다고 한다. 그러면 굳이 ID를 만들지 않아도 인라인 스타일을 사용해서 원하는 줄의 스타일을 바꾸면 되지 않을까하는 것이다. 그런데 지금 생각해보니까 외부 스타일을 이용하기 위해서는 ID 선택자를 쓸 수밖에 없을 것 같다. CSS(Cascading Style Sheet) CSS를 사용하는 이유 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 CSS의 스타일형식 선택자 {속성1 : 속성값 .. 2022. 8. 20.
입력 양식 작성하기 (2) input 태그의 주요 속성 placeholder : 입력란에 힌트를 보여준다 readonly : 읽기전용 문서를 만든다 required : 필수 입력란을 만든다 autofocus : 창을 열었을 때 바로 타이핑 할 수 있도록 해당 입력란이 선택된다 다음은 input 태그의 여러 속성을 담은 코드이다. 프런트엔드 개발자 지원서 HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다. 개인정보 이름 연락처 지원 분야 웹 퍼블리싱 웹 애플리케이션 개발 개발 환경 지원 동기 미리보기 + 추가. html 파일을 첨부하면 화면이 비정상적으로 꺠진다. 그래서 웹 미리보기는 삭제 폼에서 사용할 수 있는 여러 태그 ~ : 여러 줄을 입력할 수 있는 텍스트 박스 생성 select : 드롭.. 2022. 8. 19.

티스토리툴바