본문 바로가기
반응형

분류 전체보기203

[CSS.023] 상위요소로 부터 상속받지 않는 태그와 속성들 [CSS.023] 상위요소로 부터 상속받지 않는 태그와 속성들 [1] button이나 input 태그는 상위 요소로부터 상속받지 않는다. 이런 태그들은 값을 상속 받게끔 inherit를 사용하면 된다. (예) button,input { color:inherit; font-family: inherit; } => color 는 상속받는 속성이지만, button, input 태그 자체가 상속을 안 받기 때문에 color도 상속이 안됨. [2] padding , border 등은 상속하지 않는 속성이므로 부모 요소에서 속성을 정의해서 자식 요소에 적용되지 않는다. 다음은 상속 안되는 속성들이다. width/height margin padding border box-sizing display background .. 2022. 6. 6.
[CSS.022] 마우스에 닿으면 글자 앞뒤에 나타나기 [CSS.022] 마우스에 닿으면 글자 앞뒤에 나타나기 [1] before, after 가상 선택자 before와 after는 요소(글, 이미지 등)의 바로 앞(before)과 뒤(after)에 글이나 이미지를 만들어 낼 수 있는 기능이 있습니다. 여기에서 중요한 점은 자식요소로서 생성되는 것이고, 실제 자식이라기 보다는 가상의 무언가를 만드는 것입니다. before, after 가상 선택자를 사용할 때는 반드시 content를 써야 합니다. [2] 실습 코드 See the Pen Untitled by wootekken (@wootekken) on CodePen. 2022. 6. 1.
[CSS.021] 레이아웃 배치 by Flex [CSS.021] 레이아웃 배치 by Flex [1] 레이아웃 배치 1 See the Pen Untitled by wootekken (@wootekken) on CodePen. [2] 레이아웃 배치 2 2022. 6. 1.
[HTML.009]시멘틱(Semantic)태그 [HTML.009]시멘틱(Semantic)태그 [1] 시멘틱(Semantic)태그란? Semantic: 의미의, 의미론적인 시멘틱 태그는 "의미 있는 태그"라는 뜻으로, 인터넷 검색엔진에 나의 웹 페이지가 잘 검색되고 해석될 수 있도록 HTML 코드를 작성할 때 사용하는 태그입니다. 즉, 시멘틱 태그로 HTML을 작성하게 되면 브라우저, 검색엔진, 개발자 모두에게 요소의 의미를 명확히 설명할 수 있게 됩니다. 인터넷에는 매일 엄청난 양의 정보가 업데이트 되기 때문에 이를 처리하는 아주 효율적인 방법으로 고안된 것이 시멘틱 태그 입니다. [2] 시멘틱 태그(Semantic tag) vs 비 시멘틱 태그(Non-semantic tag) 시멘틱 태그: h1, p, img, form, label 등 요소에 대해.. 2022. 6. 1.
[CSS.020] 글자,이미지 가운데 정렬하기 [CSS.020] 글자 가운데 정렬하기 위 그림처럼 div 태그 안에 있는 글자와 이미지를 정 가운데 정렬하는 방법에 대해 알아보겠습니다. [1] div 태그안에 글자, 이미지 만들기 먼저, 위 그림과 같이 div 태그 3개를 만들고, 그 div 태그 안에 숫자 1, 2, 그리고 사과 이미지를 넣겠습니다. [2] 가로 방향으로 가운데 정렬하는 방법 위 그림과 같이 div 태그 안에 글자와 그림을 "가로방향"에서 가운데로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다. [3] 정 가운데에 정렬하는 방법 위 그림과 같이 div 태그 안에 글자와 그림을 "화면 정 가운데"로 정렬하려면 div태그에 다음의 명령어를 주면 됩니다. [4] 세로 방향으로 가운데 정렬하는 방법 위 그림과 같이 div 태그 안에 .. 2022. 6. 1.
[파이게임.003] pygame 키보드 입력처리 [파이게임.003] pygame 키보드 입력처리 [1] 이번시간에는 vscode 에디터에서 파일을 하나 만들어 코딩을 시작하겠습니다. 파이게임(pygame)라이브러리를 불러와 게임 프로그래밍에 필요한 키보드 입력을 처리하는 부분부터 알아보겠습니다. [2] vscode에서 폴더와 파일 생성하기 vscode의 상단 메뉴에서 "파일" > "폴더열기"를 눌러줍니다. 그리고 내가 원하는 곳에 빈 폴더를 하나 만들어 그 폴더를 선택해 줍니다. 아래 그림과 같이 파이썬 파일(xxx.py)을 하나 만들어 줍니다. xxx에는 내가 원하는 이름을 영어로 작성하시면 됩니다. [3] 기본코드 파이게임 라이브러리를 불러오며 게임 프로그래밍에 필요한 기본적인 코드를 아래에서 볼 수 있습니다. 1 2 3 4 5 6 7 8 9 10.. 2022. 5. 11.
[파이게임.002] vscode 에디터 설정하기 [파이게임.002] vscode 에디터 설정하기 이전 포스팅에서 설치한 vscode 에디터에서, 파이썬으로 게임을 만들기 위한 몇 가지 설정과 설치를 시작하겠습니다. [1] 구글 검색창에 python을 입력하여 www.python.org 사이트를 클릭해서 들어갑니다. [2] 아래와 같이 파이썬 사이트의 Downloads > Python x.xx.x를 클릭하여 파이썬을 다운 받습니다. (윈도우, 맥 , 리눅스 등의 운영체제 확인후 다운받기) [3] 다운받은 파이썬 설치프로그램을 클릭하고 아래 그림과 같이 PATH 경로 체크후 Install Now를 눌러 설치를 진행해 주세요. [4] 파이썬 설치가 완료되면, 이제 Visual Studio Code(vscode)를 실행해주세요. 아래 그림과 같이 뜹니다. [.. 2022. 5. 10.
[파이게임.001] vscode 에디터 설치하기 [파이게임.001] vscode 에디터 설치하기 [1] 파이썬으로 게임 개발 준비하기 - Visual Studio Code 설치하기 Visual Studio Code를 설치해 보도록 하겠습니다. 이미지를 보시면서 순서대로 따라하면 됩니다. (1) 구글(Google) 검색창에서 "visual studio code"를 검색하세요. 검색 결과 화면에서 제일 상단의 Visual Studio Code를 눌러 홈페이지로 들어갑니다. (2) 오른쪽과 같은 홈페이지에서 본인의 운영체제에 맞춰 "Download for Windows"를 눌러 다운받으면 됩니다. (3) 사용권 계약에 대해 "동의합니다"를 클릭하고 다음 버튼을 눌러 넘어갑니다. (4) 설치 위치를 정하는 부분입니다. 저는 첨부터 적혀있는데로 하겠습니다. 다.. 2022. 5. 10.
[스크래치아두이노.010] 키패드로 비밀상자 만들기 [스크래치아두이노.010] 키패드로 비밀상자 만들기 [1] 키패드란? 키패드(keypad)는 블록이나 패드 단위로 정렬된 버튼들의 모임으로, 숫자, 기호, 알파벳 문자들을 이룬다. 숫자를 포함하는 패드는 숫자 키패드로 부른다. 숫자 키패드는 컴퓨터 자판 외에도 계산기, 푸시 버튼 전화, 자판기, ATM, POS 장치, 번호 자물쇠(부호 자물쇠), 디지털 도어락과 같이 주로 숫자 입력을 요구하는 다른 장치들에서 볼 수 있다. [2] 회로도 [3] 확장센서 [4] 실습코드 (예제 1) 아래와 같이 숫자 키패드값을 변수에 저장하여, 숫자 0~3을 나타내세요. 더보기 (유제 1) 키패드 숫자 0 ~ 9까지 모두 화면에 나타날 수 있게 해보세요. (예제 2) 아래 그림과 같이 코딩하여, 숫자 키패드 값이 1/2 .. 2022. 5. 10.
728x90
반응형

티스토리툴바